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

摘要：其中定义了一些命令，还记得我们初始化项目完成后执行其实就是执行简单的来说是运行时依赖生产环境，是开发时的依赖开发环境相应的在安装包时，有两种命令参数可以把它们的信息写入文件，会把依赖包名称添加到文件键下，则添加到文件键下。

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

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

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

全局安装 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就可以了。如图所示。然后重新启动项目就可以自动打开浏览器了

在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框架为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的全局引入的方法

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

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

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

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

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

当跨域无法请求的时候我们可以修改工程下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

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