目录

一、安装vue-cli模块

二、使用脚手架vue-cli来创建项目

---

一、安装vue-cli模块

打开cmd（运行命令操作符），安装 vue-cli 模块：

npm install vue-cli -g 

install 可以简写成 i ，如：npm i vue-cli -g

如下：

1.vue-cli 模块保存目录是：%node_home%\node_global\node_modules:

2.安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

如下：

 

二、使用脚手架vue-cli来创建项目

1.在电脑任意盘符新建存放项目的文件夹。我的文件夹名称是：

 

2.进入刚才新建的文件夹vuespa文件夹目录（项目目录不能有中文及特殊符号、大写字母）。

语法：vue init webpack 项目名

例：vue init webpack vuespa1

执行完该命令，出现：

cmd命令行窗口乱码问题：

cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致（不重要，可以忽略）。

解决乱码方案：

1.修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001
2.切换回中文：chcp 936

这两条命令只在当前窗口生效，重启后恢复之前的编码。    

3.安装命令执行完成后终端会出现 "一问一答"模式，如：
（1）Project name：项目名，默认是输入时的那个名称 vuespa1，直接 回车 ;
（2）Project description：项目描述，直接 回车 ;
（3）Author：作者，随便填或直接 回车 ; 

（4）Vue build：选中第一个 Runtime + Compiler：recommended fro most users , 回车 (Runtime + Compiler：运行加编译，官方推荐);

（5）Install vue-router：是否需要 vue-router ，选择 Y ，这样生成好的项目就会有相关的路由配置文件;
（6）Use ESLint to lint your code：是否用 ESLint 来限制你的代码错误和风格。新手选择：N (实际项目中一般都会使用，这样多人开发也能达到一致的语法);  
（7）Set up unit tests：是否安装单元测试，选择：N ;
（8）Setup e2e tests with Nightwatch？是否安装 e2e 测试，选择 N ;

 注：选择 Y/n ,不区分大小写，大小Y/y或N/n都行。

（9）Should we run `npm install` for you after the project has been created?是否使用 npm install 安装依赖。选第一项：Yes, use NPM，什么都不用点，直接 回车 。

 

总结：【回车】 ==> 【回车】 ==> 【回车】 ==> 【选第一个】 ==> 【Y】  ==> 【N】 ==> 【N】 ==> 【N】 ==> 【Yes, use NPM 回车】

（10）上述步骤全部完成之后，再次直接 回车 开始生成项目，出现如下内容表示项目创建完成：
# Project initialization finished!
# ======================== 

 刚才新建的 vuespa 文件夹内就会出现创建好的项目；

 

打开里面长这样：

 

4.启动并访问项目

进入项目根目录：cd vuespa1 
运行项目：npm run dev

项目启动成功，出现：

 

打开浏览器输入 http://localhost:8080 访问项目首页。

• 4.1.修改项目端口号：

        vue-cli构建的项目，启动后默认的调试地址是8080端口的但是大部分时候，我们都要并行几个项目开发，很有可能已经占用了8080端口(Tomcat)。

步骤：

1.打开保存项目的文件夹（我的是：vuespa）；

2.点击项目；

3.选择 config ;

4.编辑 index.js ；

5.找到 port ，修改端口号；

修改后：

•  4.2.修改完端口号之后，cmd重新启动项目

进入项目根目录：cd vuespa1 
运行项目：npm run dev

项目启动成功后，就可以看到端口号被修改成 3838 了，然后就可以拿这个地址去访问项目了。

 

 完…………………………………………………………