学习Vue脚手架安装与使用

  在我们搭建vue的脚手架之前我们首先要安装node.js，也就是node环境。从node.js官网下载并安装node，安装过程很简单，一路下一步就可以了。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

1. 安装脚手架命令：

npm install -g vue-cli  (全局安装一次就可以了)

2. 创建项目命令：

vue init webpack my-app  (my-app 为文件夹名)

//这三项默认，直接回车。
Project name //项目名称。
project description //项目描述。
Author //作者
*********************************************************************************
Install vue-router?  //是否用安装路由。
Use ESLint to lint your code?  //是否用代码的严格书写模式。
//在创建完成之后要用npm install吗？
Should we run `npm install` for you after the project has been created? 
No, I will handle that myself //可以用cnpm install手动安装比npm install快。
							  //install可以简写成 i ，例如：cnpm install => cnpm i

注意：如果显示：vue : 无法加载文件 C:\software\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。
解决报错：
（1）以管理员身份运行PowerShell
（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
（3）在终端执行：set-ExecutionPolicy RemoteSigned
（4）在终端执行：get-ExecutionPolicy，显示RemoteSigned
此时再使用“vue init webpack "项目名称"创建项目，不会报错了。

cnpm命令需要安装淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 启动服务器：

npm run dev 或者 npm start   (在package.json => scripts => start找到)
 
我们可以在config => index.js中的port改变入口地址，默认是8080

4. 打包项目：

npm run build	生产环境构建(开发完成时才能用到)

5. 项目目录：

build           	 // webpack相关配置
config          	 // vue基本配置文件(监听端口)
dist            	 // npm run build 之后再生成的目录
src    
	components   		 // 存放组件  
	router       		 // 路由文件夹(配置页面跳转的)  
	App.vue     		 // App.vue是我们的主组件
	main.js              // 页面js程序入口，加载各种公共组件 
static               // 静态资源文件目录
.babelrc             // 用来将ES6编译成浏览器识别的代码
.gitignore           // git忽略上传文件
index.html           // html页面文件入口
package.json         // 配置文件

6.运行过程：
  ①加载服务器时会自动找到当前文件下的index.html(入口html页面)。
  ②src => main.js(入口js)。