Vue环境搭建和项目初始化(windows)

时间:2022-01-04 19:00:37

标签:

1.    安装node.js

官网下载安装:https://nodejs.org/en/

版本查看:node -v 

注意:node版本最好新一点好,推荐6.0以上。

2.    npm安装webpack a)     命令

npm install -g webpack //全局安装

npm install -g webpack-dev-server //安装调试工具

b)     Webpack安装权限问题

Vue环境搭建和项目初始化(windows)

如果出现上图所示错误说明用户权限受限,使用管理员权限打开命令提示符(或node.js 命令提示符)

Vue环境搭建和项目初始化(windows)

User用户身份打开node.js命令提示符窗口如下:

管理员身份打开node.js命令提示符窗口如下:

3.    npm安装vue-cli c)     命令

npm install -g vue-cli //全局安装

4.    创建一个基于 webpack 模板的新项目

注:Vue.js官方基于提供的开发模板介绍见《Vue开发模板简介

创建项目目录D:\\vue_project

在项目目录下执行下列命令

vue init webpack project-name //默认安装2.0版本

vue init webpack#1.0 project-name //安装1.0版本

Vue环境搭建和项目初始化(windows)

5.    项目目录

Vue环境搭建和项目初始化(windows)

6.    安装项目依赖

一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

7.    启动项目

npm run dev

8.    发布

npm run build

a)     vue-simple-webpack

执行发布命令后,会生成发布时的build.js,,并且是经过压缩的。

b)     vue-webpack

执行发布命令后,会将所有的静态资源(包括index.html)都生成到dist目录下。也就是说你可以直接拿着dist目录去发布应用,例如在IIS下将dist目录发布为一个网站。

Vue环境搭建和项目初始化(windows)