Windows下vue的创建、启动步骤

前后端分离项目，自学vue前端，没整过前端用vue, nodejs和webpack的开发管理方式。来回折腾终于把已经建好的vue项目启动起来，做个笔记记录下步骤备用，只针对没有任何前端项目启动经验的，记录下自己创建的过程（初次接触很懵逼！！！）：

windows7/10

（1）装好nodejs，最新版本6.10以上的好像都能自动配置路径和npm啥的，反正装好后在任意路径下用cmd查"node --version"或者"npm -v"都能给出版本号，不用像一些其他教程一样还要配置环境变量。个人偏好者另说。

（2）切换npm镜像：在任意路径下用cmd输入“npm install -g cnpm --registry=https://registry.npm.taobao.org” 这样就能用淘宝的npm镜像代替国外的资源，懒得用代理同学的福音。以后就可以用cnpm命令来全部代替npm。不设置代理的话，在后续项目的npm install的时候，容易因为超时而失败。有教程把这条命令的“–registry”写成只有一个“-”，注意是两个“–”。

（3）npm全局安装vue：仍旧在任意路径的cmd下输入“cnpm install vue-cli -g”，安装vue。成功后输入vue能出来信息。

（4） 创建一个基于webpack 模板的新项目：vue init webpack new-project（ps:完毕之后，建议先关掉cmd窗口，再操作第5步）

• 输入上面命令后，会询问几个选项，根据自己需要填写就可以了。
  Project name :项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。
  Project description:项目描述，直接回车
  Author ：作者
  vue build 构建方式（暂且这么解释）
  两个选择（上下箭头选择，回车即为选定）
  1.Runtime + Compiler:recommended for most users
  (译：运行+编译：被推荐给大多数用户)
  2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
  allowed in .vue files-render functions are required elsewhere
  (译：只运行大约6KB比较轻量的压缩文件，但只允许模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈现函数。翻译不精准，意思大概是选择该构建方式对文件大小有要求)
  这里推荐使用1选项，适合大多数用户的
  install vue-router？是否安装vue的路由插件，需要就选y，否则就n（以下均遵循此方法）
  Use ESLint to lint your code?是否使用ESLint检测你的代码？
  （ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。）
  Pick an ESLint preset:选择分支风格
  选项有三个
  1.standard(https://github.com/feross/standard) js的标准风格
  2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法
  3.none (configure it yourself) 自己配置
  Setup unit tests? 是否安装单元测试（暂不详细介绍）
  Pick a test runner 选择一个单元测试运行器
  选项有三个
  1.Jest（Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架）
  2.Karma and Mocha
  3.none
  Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景”。）
  Should we run ‘npm install’ for you after the project has been created?(译：项目创建后是否要为你运行“npm install”?这里选择包管理工具)
  选项有三个
  yes,use npm(使用npm)
  yes,use yarn(使用yarn)
  no,I will handle that myself(自己操作)
  一路回车到此等待安装完毕，会提示接下来的命令行

（5）npm项目依赖组件安装：cmd进入前端vue项目的根目录，输入命令“cnpm install”，会根据前端项目的依赖关系下载好相关的组件，存在项目目录的node_modules文件夹下。一般git库会gitignore依赖组件，也就是没有node_modules文件夹，不然太大了… 这步容易发生err，遇见了就要打回去重弄，不要掩耳盗铃，具体错误排查stackoverflow…。

（6）配置项目主机地址：前端项目里需要有个config文件夹，里面要有host.js或者config.js文件，定义nginx转域后的主机地址+端口号（也就是nginx.conf里面server模块的server_name值+listen的端口号）。git项目拉下来没有的话自己加一个，文件内容范例（下面用${}表示nginx.conf里面server模块对应的字段值）：

const host = ‘http://$serve{r}_{n}ame:${listen}/server/’;
export {host};

（7）配置windows的HOSTS：由于是在本机上启用前端项目，需要将127.0.0.1和nginx代理后的域名做对应。找到系统的HOSTS文件（win7系统下在C:\Windows\System32\drivers\etc里面），增加一条“127.0.0.1 ${server_name}”。否则本地启动前端项目后浏览器访问nginx代理后的域名会发生dns错误。

（8）启动项目：cmd进入前端vue项目的根目录，输入命令“npm run dev”，此时会用nodejs启动这个前端的vue项目。大功告成。

一个比较典型的用webpack管理的vue项目应该有如下文件和文件夹：

config/：定义代理的域名

dist/: 整个前端项目用webpack打包后的目标存放文件夹，里面一般有bundle.js文件（执行 npm run build生成静态文件dist）

lib/: 开发时引用的一些依赖文件，最经典的就是jquery

node_modules/：上面介绍的用npm对项目依赖组件进行安装时就放在这个文件夹里。

src/：自己写的源代码

index.html：主页入口文件

package.json和webpack.config.js：这两个文件应该是组件依赖关系和管理打包的配置文件？不太懂，反正没有是不能cnpm install、cnpm run build、cnpm run dev的。

第一次配置好后，以后启动只用一步：

进入前端项目根目录，cmd运行npm run dev