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

一.项目初始化

1）vue官网上的步骤

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

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

使用cnmp

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

// 使用
cnpm install express
其中需要注意的是

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

2）项目结构

├─.babelrc // babel配置文件
├─.gitignore
├─index.html // 主页
├─package.json // 项目配置文件
├─README.md
├─config // webpack配置文件
├─dist // 发布目录
│ ├─.gitkeep
├─src // 开发目录
│ ├─App.vue // App.vue组件
│ ├─main.js // 预编译入口

在src路径下

asset文件夹下面的是静态资源 img font等等
components文件夹下面是.vue的组件
router文件夹下面的是index.js设置路由
App.vue 所有自己写的组件，都是在这个组件之上运行了
main.js webpack入口文件，webpack四大特性entry入口、output输出，loader加载器，plugins插件，可以再项目中buildwebpack.base.conf.js第12行看到这个入口文件是哪个

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

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