vue项目搭建

一、安装 nodejs 环境

https://nodejs.org/en/download/ 官网下载

检查版本：
点击 "开始"=>"运行"=>输入"cmd"

node -v //查看node版本
npm -v //查看npm版本

二、安装vue-cli

打开cmd，输入
npm install -g @vue/cli

三、创建项目

vue init webpack test  //test为项目名称

“问答”模式
Project name  //项目名称，默认是输入时的那个名称(test)，想改的话直接输入修改，不改直接回车
Install vue-router  //是否需要vue-router，默认选择使用
Use ESLint to lint your code  //是否使用ESLint，默认选择使用
Setup unit tests with Karma + Moch?  //是否安装单元测试，由于我们现在还没有单元测试，所以选择”N”
Setup e2e tests with Nightwatch  //是否安装e2e测试，这里也同样选择的是”N”

 注：这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader

四、目录结构说明

1.build——[webpack配置]

build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。

2.config——[vue项目配置]

config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等

3.node_modules——[依赖包]

node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。

4.src——[项目核心文件] 

4.1 index.html——[主页]

4.2 App.vue——[根组件]

4.3 main.js——[入口文件]

4.4 router——[路由配置]

五、下载依赖包

npm install

六、运行

npm run dev

七、总结

npm install -g @vue/cli  //下载vue-cli脚手架
vue init webpack test  //生成项目，形成基本结构
npm install  //下载依赖包
npm run dev  //运行