创建vue项目（完整步骤） vue2.x / vue3.x

前言

在安装vscode+Nodejs并配置环境，完成基础环境搭建后，全局安装vue-cli脚手架。（具体可参考上一篇文章）

vue-cli是一个脚手架工具，通过vue-cli可以快速构建一个vue项目，里面自带了webpack的各种配置，webpack打包工具，帮助构建大型项目的目录，最终也可将代码打包成线上可运行的项目。由于vue-cli版本的不同，vue项目初始化有两种方法：

 1）vue init webpack 项目名: vue-cli2.x 版本的初始化方式，启动方式默认为 npm run dev ；
 
 2）vue create 项目名：vue-cli3.x 及更高版本的初始方式 ，启动方式默认为 npm run serve；

注：npm run serve可在package.json中将scripts内的"serve":属性更改为"dev":。

在cmd中执行vue -V可以查看已经安装的vue-cli版本，根据自己的版本选择创建项目的方式：

方法1. vue init webpack 项目名 （vue2.x）

该方法是基于vue-cli2.x版本脚手架构建项目，创建的项目也是vue2.x版本。新建文件夹，在cmd中执行vue init webpack 项目名，

- Project name：项目名称， 回车
- Project description：项目描述，直接回车 Author：作者信息，回车 
- Install vue-router?是否安装vue的路由插件，选择y 
- Use ESLint to lint your code?是否用ESLint来限制你的代码错误和风格。不需要输入n，需要选择y。但是选择之后对代码格式校验过于严格，影响开发效率，所以推荐选n
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具，不需要输入n，需要输入y 
- Setup  e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试，不需要n，需要y

结束后在cmd中继续执行cd vue-demo 和npm i ,给项目安装依赖：

cd vue-demo
npm i

安装成功后，文件目录内多出一个文件夹node_modules:

在package.json中查看创建的vue版本，最后执行npm run dev启动项目，npm run build 打包项目。

方法2. vue create 项目名（vue2.x & vue3.x)

vue-cli3.x 及更高版本脚手架创建vue项目，可根据需要在创建过程中选项二vue2.x或者vue3.x。

1. 在目标文件夹中cmd执行vue create 项目名；选择自定义配置，回车，如下图：

2. 按需选择项目所需的配置，按空格键选择要安装的配置资源，带 * 号说明被选上了。

其中，代码格式校验过于严格，开发过程中影响效率，所以一般取消勾选。

3. 选择创建vue2.x 或者 vue3.x。

4. 路由是否选择history模式，这里选择n。创建成功后也可在router中切换history和hash模式。

5. 选择安装的css预处理器，推荐node-sass

6. 第三方配置文件的存在方式：1.独立的文件 2.综合的；推荐综合的

7. 是否保存本次配置信息（保存预设），选择n，回车

8. 如下图，创建成功。

9. 运行

cd到项目文件夹：cd demo
运行：npm run serve

10. 启动

在浏览器输入对应的网址就可以看到界面啦
http://localhost:8080/

11. 停止服务

停止服务：两下Ctrl+C 或者Ctrl+C一下然后Y。

12. 打包

npm run build 在文件夹下生成dist文件夹。