vue-cli +webpack+vue-router 踩坑记

此次主要是记录下本身在作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

四.结尾

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