vue-vue-router-vuex项目实战——环境搭建运行

node环境、npm

npm全局安装vue-cli，npm install -g vue-cli（安装一次后，下次不用安装）

用vue-cli构建项目，进入存放项目的路径，vue init webpack project

npm install（建议用淘宝源cnpm，安装速度快，避免有些依赖包安装不了，安装淘宝源执行npm install -g cnpm --registry=https://registry.npm.taobao.org）

安装完成后运行，npm run dev，浏览器查看效果

完成上述步骤只是初步构建vue项目，要开始你自己的项目还需要安装你需要的其他依赖包，例如node-sass、sass-loader（执行cnpm install node-sass --save，cnpm install sass-loader）
项目目录结构



main.js配置如下：



默认路由跳转文件index.vue：



路由配置index.js



注：引入路径写错会报错

由于在项目构建时选择了安装格式检查eslint，致使项目路径配置、代码全部正常的情况下报了好多错，本来想网上找一下资料，在eslintrc.js一一配置一下规则，奈何报的错误真的太多了，查看错误信息，基本就是空格缩进之类的，干脆直接把这个插件给禁用了。在webpack.base.conf.js中找到如下代码：



注释掉，再运行npm run dev，OK，项目运行起来了

后注：vue、vue-router、vuex较早就在官网把文档撸了一边，但是真正动手实践把这些内容都组合起来使用，一时间竟不知该如何下手。早在先前就一直想用vue全家桶实现一个项目，在3月份APP项目开始之初有想过用vue的组件化开发，但是考虑到第一次用在实际开发项目中，公司这边时间又比较赶，最终放弃了这个想法，改用传统的HTML5 mui的框架开发，出了错误可以快速调试，开发速度也会快很多，因为4月份还穿插了PC网站的开发。如今APP开发进入尾声，正好有时间可以捣腾一下用vue组件化开发。但是发现还是很不熟练啊。。。