达维营-前端网vue.js 初步学习
传说中的vue 全家桶 ：vue + vue-router + vuex
1、构建新项目（基于webpack 3.8.1，前提安装node环境）
$ npm install --global vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev
注意：进行项目创建和初始化之后是没有一些依赖包的，目录中的node_moduless文件夹是没有的，这个时候我们就要进入项目的目录下，使用”npm install”来初始化依赖包，初始化需要的包都在package.json里面设置好了。
2、vue-loader
vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。如果要想在vue项目中使用scss,要告诉vue-loader怎么样解析我的scss文件。
在webpack中，所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack loader处理组件中的代码，然后它根据lang属性自动判断出要使用的loaders。 因为在新版本的vue-cli已经帮我们把sass-loader配置好了，放在了util.js里面。 所以无需在webpack.base.config.js对scss进行配置，只要安装处理sass/scss的loader，就能在vue中使用scss了。
（1）、Vue对scss的依赖
①、首先安装依赖
$ npm install node-sass --save-dev $ npm install sass-loader --save-dev
②、在需要用到scss的地方标注：
<style lang="scss"> </style>
3、配置文件
（1）、解释一下webpack.base.config.js，webpack.base.conf.js是一个基础的的环境配置文件，里面包含各个环境（包括开发环境，生产环境，测试环境）都需要的配置，即公用部分。比如说入口文件和输出文件这类，然后开发环境的webpack.dev.conf.js中开头位置有这么一句：
const devWebpackConfig = merge(baseWebpackConfig, // 将 webpack.dev.conf.js 的配置和 webpack.base.conf.js 的配置进行合并，这样重复的配置代码就不用写两次了。
（2）、使用两个独立的Webpack配置文件，一个用于开发（webpack.dev.conf.js），另一个用于生产(webpack.prod.conf.js),共用的配置部分放在webpack.base.conf.js中。
（3）、在build/build.js文件中定义变量：process.env.NODE_ENV = ‘production'(在使用webpack和vue-cli构建的项目中，Vue会根据 process.env.NODE_ENV 决定是否启用生产环境模式，默认为开发模式)
4、项目结构
(1)、整体项目目录
--build --config --dist //npm run build 之后再生成的目录 --src --components // 存放组件 --page //页面组件，由vue-router引入 --router //路由 --store // 数据流管理 main.js //入口文件 app.vue //主组件 --static //静态文件目录 .babelrc .gitignore //git忽略上传文件 index.html //静态文件入口 package.json //配置文件
(2)、main.js文件
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
//开启debug模式
Vue.config.debug = true
new Vue({
el: '#app',
router, // 创建和挂载根实例。记得要通过 router 配置参数注入路由
template: '<App/>',
components: { App },
});
(3)、app.vue文件
app.vue是我们的主组件，所有页面都是在App.vue下进行切换的,app.vue在所有页面都有，通常将公用的组件放在里面
<template>
<div id="app">
<main-header></main-header>
<mainSidebar/>
<!-- Content Wrapper. Contains page content -->
<router-view></router-view>
<!-- /.content-wrapper -->
<MainFooter/>
</div>
</template>
5、npm run build 后生成的dist文件访问本地static路径下的data.json数据有问题，需要修改productionSourceMap属性为false
module.exports = {
build:{
assetsSubDirectory: 'static', //修改这里成你项目放置静态文件的目录
assetsPublicPath: './', //修改这里成你项目放置静态文件的目录
productionSourceMap: false //修改为false
}
}
6、异步DOM更新
如果需要拿到更新后dom中的数据，则需要通过 Vue.nextTick(callback)，在DOM更新后，执行某个操作（属于DOM操作）
实例调用vm.$nextTick(function () {})
methods: {
fn() {
this.msg = 'change'
this.$nextTick(function () {
console.log('$nextTick中打印：', this.$el.children[0].innerText);
})
}
}