传说中的vue 全家桶 :vue + vue-router + vuex css
一、构建新项目(基于webpack 3.8.1,前提安装node环境)html
$ npm install --global vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev
注意:进行项目建立和初始化以后是没有一些依赖包的,目录中的node_moduless文件夹是没有的,这个时候咱们就要进入项目的目录下,使用"npm install"来初始化依赖包,初始化须要的包都在package.json里面设置好了。
二、vue-loadervue
vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。若是要想在vue项目中使用scss,要告诉vue-loader怎么样解析个人scss文件。node
在webpack中,全部预处理器都要匹配相应的loader,vue-loader容许其余的webpack loader处理组件中的代码,而后它根据lang属性自动判断出要使用的loaders。 由于在新版本的vue-cli已经帮咱们把sass-loader配置好了,放在了util.js里面。 因此无需在webpack.base.config.js对scss进行配置,只要安装处理sass/scss的loader,就能在vue中使用scss了。webpack
(1)、Vue对scss的依赖git
①、首先安装依赖web
$ npm install node-sass --save-dev $ npm install sass-loader --save-dev
②、在须要用到scss的地方标注:vue-router
<style lang="scss"> </style>
三、配置文件vuex
(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 的配置进行合并,这样重复的配置代码就不用写两次了。vue-cli
(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 决定是否启用生产环境模式,默认为开发模式)
四、项目结构
(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>
五、npm run build 后生成的dist文件访问本地static路径下的data.json数据有问题,须要修改productionSourceMap属性为false
module.exports = { build:{ assetsSubDirectory: 'static', //修改这里成你项目放置静态文件的目录 assetsPublicPath: './', //修改这里成你项目放置静态文件的目录 productionSourceMap: false //修改成false } }
六、异步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); }) } }