使用 cmd 构建 Vue 测试项目

Vue.js 提供一个官方命令行工具webpack，可用于快速搭建大型单页应用。

1 安装webpack

在命令行输入：

npm install -g webpack

2 进入想要建立项目的文件目录

方案一：命令行cd 进入想要建立项目的目录

方案二：直接在该目录下右键打开git bash窗口

3 创建vue项目

设我们要创建的项目名称是my-project，则指令：

vue init webpack my-project

根据出现的指令分别操作

Project name (vuetest) 
#项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母，如果有会报错)

Project description (A Vue.js project)  
#项目描述，也可直接点击回车，使用默认名字

Author (........)       
#作者，你想输什么就输什么吧,接下来会让用户选择

Runtime + Compiler: recommended for most users    
#运行加编译，既然已经说了推荐，就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-
specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   
#仅运行时，已经有推荐了就选择第一个了

Install vue-router? (Y/n)    
#是否安装vue-router，这是官方的路由，大多数情况下都使用。这里就输入“y”后回车即可。

Use ESLint to lint your code? (Y/n)      
#是否使用ESLint管理代码，ESLint是个代码风格管理工具，
#是用来统一代码风格的，并不会影响整体的运行，
#这也是为了多人协作，新手就不用了，一般项目中都会使用。

Pick an ESLint preset (Use arrow keys)            
#选择一个ESLint预设，编写vue项目时的代码风格，因为我选择了使用ESLint，也可以选no

Standard (https://github.com/feross/standard)    
#标准，去给提示的standardgithub地址看一下， 原来时js的标准风格

AirBNB (https://github.com/airbnb/javascript)    
JavaScript
#最合理的方法，这个github地址说的是JavaScript最合理的方法

none (configure it yourself)    
#这个不用说，自己定义风格，具体选择哪个因人而异吧，我选择标准风格

Setup unit tests with Karma + Mocha? (Y/n)  
#是否安装单元测试，我选择安装

Setup e2e tests with Nightwatch(Y/n)?     
#是否安装e2e测试 ，我选择安装

这里没列全，其他默认回车即可。

等待项目初始化，出现以下内容，表示初始化完成：

会得到一个目录如下的项目：

其中，各个目录的作用：

1. build文件夹：打包配置的文件夹
  1.1  webpack.base.conf.js ：打包的核心配置
  1.2  build.js：构建生产版本,项目开发完成之后,通过build.js打包(加载base与prod，读取完之后通过webjpack命令对项目进行打包)
  1.3  webpack.prod.conf.js：被build.js调用,webpack生产包的一个配置。基础代码都在1.1里面写,1.3是对1.1的扩展与补充
  1.4  dev-client.js：热更新的插件，进行对客户端进行重载
  1.5  dev-server.js：服务器。(背后的原理是启动一个express框架,这是一个基于node做的一个后端框架，后端框架可以在前端起一个服务)
  1.6  vue-loader.conf.js：被base加载,
  1.7  utils.js：工具类，公共的配置
2. config文件夹：打包的配置，webpack对应的配置
   2.1 index.js：可与1.1合并成一个文件，但由于spa想做一个清晰的架构,因此把它们拆分开了
3. src文件夹：开发项目的源码
4. App.vue ：入口组件
5. static文件夹：静态资源，图片
6. .babelrc：ES6解析的配置
7. .gitignore：忽略某个或一组文件git提交的一个配置
8. index.html：单页面的入口，通过webpack的打包构建之后,会对src源码进行编译,最终把它们插入到html里面来
9. package.json：基础配置,告诉我们项目的信息(版本号、项目姓名、依赖)
10. node_modulues：项目的安装依赖

4 安装依赖

进入到项目目录下，使用 npm install 安装package.json包中的依赖

# 注意，需要打开该项目
cd my-project
npm install

这样表示安装结束：

5 运行项目

运行指令：

npm run dev

会得到以下内容：

6 展示项目

访问 http://localhost:8080/，输出结果如下所示：

7 结束项目

 ctrl+c，选择Y即可停止项目的运行