使用vue-cli来构建项目

一、构建项目

手动创建了项目存放的文件夹vuetest，cd到项目中：vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包： 

E:\Project\vue-cli>cd vuetest

E:\Project\vue-cli\vuetest>vue init webpack fistApp

? Project name first-app
? Project description 我的第一个vue测试项目。
? Author liangpingguo
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "fistApp".


# Installing project dependencies ...
# ========================

# 以下省略数行构建过程......
# 构建完成，显示如下消息：
# Project initialization finished!
# ========================

To get started:

  cd fistApp
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了first-app
• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置git的作者，他会读取。
• Install  vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格（有些像缩进、空格、空白行之类的规范）。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。
  不小心选择了Y，在开发过程中一直报错，——只要修改build\webpack.base.conf.js这个文件就好啦：删除`createLintingRule()`

  module: {
      rules: [
        ...(config.dev.useEslint ? [createLintingRule()] : []),
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoaderConfig
        },
  ……
  
  改为：
  
  module: {
      rules: [
        ...(config.dev.useEslint ? [] : []),
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoaderConfig
        },

• setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n

二、 测试项目

1、查看..\vuetest\fistApp 是否存在，fistApp就是刚构建好的项目；

介绍一下 fistApp 目录及其作用：

     build：最终发布的代码的存放位置。

     config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

     node_modules：npm 加载的项目所需要的各种依赖模块。

     src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

             assets:放置一些图片，如logo等

             components:目录里放的是一个个的组件文件

             router/index.js：配置路由的地方

             App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的<router-view/>必不可少。

             main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

     static：静态资源目录，如图片、字体等。

     test：初始测试目录，可删除

      .XXXX文件：配置文件。

     index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

     package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

     README.md：项目的说明文件。

     webpack.config.js：webpack的配置文件，把.vue的文件打包成浏览器能读懂的文件。

     .babelrc:是检测es6语法的文件的配置

     .getignore:忽略文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

     .postcssrc.js:前缀的配置 

     .eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

     .eslintignore:忽略eslint对项目某些文件的语法规则的检查

2、运行

E:\Project\vue-cli\vuetest>cd fistApp

# 如果创建项目的时候没有报错，这一步可以省略。如果报错了 
E:\Project\vue-cli\vuetest>fistApp>cnpm install  或 npm install  # 安装项目的依赖

E:\Project\vue-cli\vuetest>fistApp>npm run dev

# 输出如下消息
DONE  Compiled successfully in 2616ms                                                                                                                  22:40:19

 I  Your application is running here: http://localhost:8080

3、浏览器访问 http://localhost:8080， 默认在浏览器中会出现vue的logo

三、打包项目

项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。