vue项目搭建
上次用vue是3月份，现在已经忘得差不多了，留一份简易的搭建步骤备忘。
最简单的搭建当然是用vue-cli啦。官方提供了browserify和webpack的手脚架项目模板。我这里用的webpack。
webpack模板有webpack-simple和webpack两种，webpack多了一些如Eslint检查功能，我们用webpack-simple够了。
1.安装vue-cli
npm install vue-cli --save-dev
记住， --save-dev是开发时用的；如果有些依赖上线后还需要，就用--save
2.下载webpack-simple模板
vue init webpack-simple myDemoName
除了myDemoName是自定义的项目名称，前面的命令是固定的。执行之后会弹出一系列询问，按着填然后enter就好了
3.下载项目依赖
在cli输入 cd myDemoName切换到项目所在目录，然后npm install 需要的依赖。这时候项目中会多了个node_modules 目录。
我install的东西有：
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-env babel-preset-stage-2
//babel-preset-latest 已废弃，env代替
npm install --save babel-polyfill
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-register
npm install sass-loader node-sass --save-dev
npm install css-loader style-loader --save-dev
npm i postcss-loader --dev-save
npm install --save-dev postcss-cssnext
npm i autoprefixer --dev-save（postcss-loader插件）
npm install vue-loader
npm install vue-router
4.执行与发布
npm run dev --运行项目
npm run build --发布（打包并自动生成dist文件）
dev和run这两个命令是帮你写好在package.json中的script中的命令
前者是：cross-env NODE_ENV=development webpack-dev-server
后者是：cross-env NODE_ENV=production webpack --progress
到了这一步npm run 的时候，可能会报错说：
'NODE_ENV'
不是内部或外部命令，也不是可运行的程序或批处理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv "D:\\nodejs\\node.exe"
或者
'webpack-dev-server'
不是内部或外部命令，也不是可运行的程序或批处理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv "D:\\nodejs\\node.exe"
解决方案：
1.安装across-env: npm install cross-env --save-dev
2.在package.json的script命令里的build和run两行，NODE_ENV=xxxxxxx前面添加cross-env就可以了。
后面如果报错说cannot find module XXX，那就npm 安装那个缺失的模块。
-------------------------------------------分割线--------------------------------------------------------
当然，实际的项目中仅仅是上面的步骤是不够的。
我们在项目中总会需要用到单文件组件、路由、项目比较大的时候还会用到状态管理。
单文件组件：
.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>, <script> 和 <style>，还允许添加可选的自定义块
vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 CommonJS 模块，module.exports 出一个 Vue.js 组件对象。
npm install vue-loader
--针对预处理：
我的css用的sass
npm install sass-loader node-sass --save-dev
<style lang="sass"> /* write sass here */
</style>
sass-loader 默认解析 SCSS 语法。如果你想要使用 SASS 语法，你需要配置 vue-loader 的选项：
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
}
路由：
现在我们已经搭建好开发环境，也通过.vue文件来解耦各个组件。vue作为一个数据驱动视图层的框架，想在客户端实现视图的切换，就需要用到它推荐的vue-router。
安装
1.直接下载：https://unpkg.com/vue-router/dist/vue-router.js 在vue.j后面引入
2.npm 安装：npm install vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // 如果使用全局的 script 标签，则无须如此（手动安装）
使用
引入vue-router后，需要做的是：
一.将组件(components)映射到路由(routes)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({ routes // （缩写）相当于 routes: routes })
// 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({ router }).$mount('#app')
// 现在，应用已经启动了！
二.告诉 vue-router 在哪里渲染它们。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
以上路由例程html和js引自https://router.vuejs.org/zh-cn/essentials/getting-started.html
如果希望路由中的某个路径（组件）异步加载，可以将组件的定义换成异步函数：
const setting = resolve => require.ensure([], () => resolve(require('./components/setting.vue')), 'setting');
再将setting放进路由中（就是后面的路由设置不变，仅仅是组件定义换成异步函数）。
再高级的操作看文档例子就好了。
今天到此为止。（为什么我在编辑的时候字体是黑色的，保存好看到的却是不同颜色？？）
---------------------------------------分割线--------------------------------------------------------------------------------
附录：
*关于单文件组件中使用postcss和autoprefixer，一开始我也不确定，因为vue-loader有内置postcss了，但是具体设置跟一般webpack不太一样，网上很多都是没有的帖子。
后来结合了一位sf的网友给出的解决方案和文档中的选项参考，正确的配置应该如下：
webpack2需要以下操作：
需要安装postcss-loader。
var autoprefixer = require('autoprefixer');
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
'js': 'babel-loader'
}
postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })]
}
}
不过文档中有提到，在 >=11.0.0 版本中，推荐使用 PostCSS 配置文件代替：https://github.com/postcss/postcss-loader#usage
*关于babel-polyfill
npm安装之后的使用：
1.entry point文件头引入：
//ES6语法
import "babel-polyfill";
//或者使用require如下：
require("babel-polyfill");
2.在webpack.config.js中：
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
*关于babel
1.安装之后，在package.json同级目录下创建.babelrc文件。vue的webpack模板已经帮我们生成了。
然而window是不能直接生成的.xxx文件的，曲线生成方法是：
cli:type NUL > .babelrc
或者新建一个.txt文件，重命名为 .babelrc. 即可。
2.在.babelrc中是以json格式配置babel的，设置如下：
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins":["transform-runtime"]
}
*关于Eslint
1.安装
npm install -g eslint
eslint --init
eslint yourfile.js
在第二步init之后，根目录会生成一个.eslintrc.js文件，里面写了检测规则。
检测规则可以写在webpack中也可以写在.eslintrc里，下面是SF网友"苹果小萝卜"在《webpack2集成eslint》中给出的eslint及相关依赖：
eslint —— 基础包
eslint-loader —— webpack loader
babel-eslint —— 校验babel
eslint-plugin-html —— 提取并检验你的 .vue 文件中的 JavaScript
eslint-friendly-formatter —— 生成美化的报告格式
# javascript-style-standard 依赖的包
eslint-config-standard
eslint-plugin-import
eslint-plugin-node
eslint-plugin-promise
eslint-plugin-standard
2.关于配置
https://segmentfault.com/a/1190000008575829?utm_source=itdadao&utm_medium=referral
https://segmentfault.com/a/1190000010463914
