这次主要是记录下自己在做vue-cli +webpack +vue-router 的经历 以及一些踩过的坑，算是做一个简单的总结

一.vue的基本介绍

1）渐进式的框架

它是渐进的，没有强主张，框架做分层设计，每层都可选，不同层可以灵活接入其他方案。你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以。
总的来说，它给你提供足够的optional，但并不主张很多required。

2）vue中两个核心点

1.响应的数据绑定
数据变化=> 自动更新视图 利用Object.definedProperty中的 setter/getter代理数据，监控对数据的操作
具体实现：把一个普通的js对象传给vue实例的data选项 vue将遍历此对象所有的属性，并使用Object.defineProperty 把这些属性全部转为getter/setter 。vue内部会对数据进行劫持操作，进而追踪依赖，在属性被访问和修改时，通知变化。
2.组合的视图组件
根据UI页面映射为组件树，划分不同的组件可维护，可重用，可测试

3）虚拟DOM

利用在内存中生成与DOM与之对应的数据结构，这个结构称之为虚拟DOM.当数据发生变化的时候，能智能地计算出重新渲染组件的最小代价并应用到DOM操作上

二.项目初始化

1）vue官网上的步骤

全局安装 vue-cli
npm install –global vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

-g :代表全局安装
这样项目就创建好了，因为npm源是在国外，如果是要使用国内的镜像：
淘宝npm镜像 搜索地址：http://npm.taobao.org/
registry地址：http://registry.npm.taobao.org/

使用cnmp

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

//
其中需要注意的是 使用npm会需要先下载node.js

安装过程中，会提示 是否使用eslint，eslint算是一个代码语法规范检查的工具，不同意就不会把检查语法规范的功能加进webpack编译的流程里
个人建议是选择n 这样避免了很多格式错误

自动打开浏览器:只要在项目根目录下找到package.json，然后打开该文件，在文件中的script脚本命令的dev行加入–open就可以了。如图所示。然后重新启动项目就可以自动打开浏览器了

2）项目结构

在src路径下

1.packagejson文件 packagejson文件是项目的配置文件，定义了项目的基本信息以及项目的相关包依赖，npm运行命令等，位于项目根目录下。

其中“scripts”定义了一些npm命令，还记得我们初始化项目完成后执行npm run dev 其实就是执行
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

2.dependencies VS devDependencies
简单的来说dependencies是运行时依赖（生产环境），devDependencies是开发时的依赖（开发环境）
相应的npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，–save 会把依赖包名称添加到 package.json 文件 dependencies 键下，–save-dev 则添加到 package.json 文件 devDependencies 键下。
举个例子，比如我们项目要引用jQuery，因为jQuery部署到线上环境也要使用（生产环境），所以安装jQuery的命令为npm install jQuery –save 这时候 dependencies 键下就会多了一个jQuery包
3.基础配置文件
webpack.base.conf.js基础的 webpack 配置文件主要根据模式定义了入口出口，以及处理 vue, babel 等的各种模块，是最为基础的部分。其他模式的配置文件以此为基础通过 webpack-merge 合并。
4.main.js .src/main.js文件解读 是webpack入口文件
5.asset文件夹下面的是静态资源 img font等等
6.components文件夹下面是.vue的组件
7.router文件夹下面的是index.js设置路由
8.App.vue 所有自己写的组件，都是在这个组件之上运行了

三.项目创建完成 文件的配置 引入

1)介绍目前经常会用到的三种ui框架

1.首先 假设我们要使用的ui框架为mintui 那么参照mintui官方文档
先是npm install mint-ui -S

然后在App.vue中进行引入
// 引入全部组件
import Vue from ‘vue’;
import Mint from ‘mint-ui’;
Vue.use(Mint);

2.同理 可以看到注释中写着 使用Amazeui vue版本的引入方法
npm install amaze-vue –save

import Vue from ‘vue’;

import AmazeVue from 'amaze-vue';
import 'amaze-vue/dist/amaze-vue.css';

Vue.use(AmazeVue);

3.第三中ui semantic-ui 相比较而言 会麻烦一点
首先安装jquery
npm install –save jquery
然后在 webpack.dev.config.js 文件中，添加
// plugins 区块内
new webpack.ProvidePlugin({
$ : “jquery”,
jQuery : “jquery”,
“window.jQuery”: “jquery”,
“root.jQuery” : “jquery”
})
随后安装 semantic-ui-css
npm install semantic-ui-css –save
之后在 webpack.base.config.js 文件中添加，
resolve : {

extensions: ['', '.js', '.vue'],
fallback  : [path.join(__dirname, '../node_modules')],
alias     : {
  'vue'       : 'vue/dist/vue.common.js',
  'src'       : path.resolve(__dirname, '../src'),
  'assets'    : path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components'),
  // Semantic-UI
  'semantic'  : path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
}

}
随后在 webpack.dev.config.js 文件中，添加

plugins: [

new webpack.ProvidePlugin({
  $              : "jquery",
  jQuery         : "jquery",
  "window.jQuery": "jquery",
  "root.jQuery"  : "jquery",
  // Semantic-UI
  semantic     : 'semantic-ui-css',
  Semantic     : 'semantic-ui-css',
  'semantic-ui': 'semantic-ui-css'
}),



最后在App.vue中引入
import semantic from 'semantic'
import '../node_modules/semantic-ui-css/semantic.min.css'

同样也可以从上面看出，jquery的全局引入的方法

2）项目中的公共文件

对于项目中会公共使用到的头部 尾部等文件可以统一在App.vue文件中引入

注意起名的时候不能写成关键字 像footer等h5自带的标签
从上图中可以看出来 tabbar为公共文件而 router-view则为通过路由引入的组件
此外 因为习惯了 使用scss 需要
npm install sass-loader node-sass style-loader –save-dev

3）路由的设置

从图上可以看出 先是使用import把需要使用路由的组件引入 需要注意的就是 from 后面需要带上’@/’
其次是关于嵌套路由的设置

嵌套路由不能写成’/second’的形式 会被认为是从根目录下引入
第三点是对于 meta的设置 因为是单页面应用 所以切换时需要改变页面的title keyword description

需要结合main.js中的router.beforeEach方法使用

4）跨域设置

当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。

将target设置为我们需要访问的域名，然后在main.js中设置全局属性：Vue.prototype.HOST = ‘/api’
至此，我们就可以在全局使用这个域名了，如下：
var url = this.HOST + ‘/movie/in_theaters’

this.$http.get(url).then(res => {
  this.movieList = res.data.subjects;
},res => {
  console.info('调用失败');
});

最后项目运行
npm run dev
项目发布
npm run build

四.结尾

差不多这次需要记录的就这么多，因为公司前端就我一个人，很多东西都是网上查以及问的人，感觉坑很多，很多也不是很熟悉，用到的都只是小部分，所以以后随时补充。