vue 从零开始搭建项目（一）

技术栈：Vue-cli , vux , axios , vue-loader , webpack

项目基本架构 - Vue-cli

1、vue.js 提供一个官方命令行工具，可以用于快速搭建大型单页应用。
2、安装命令
vue init webpack my-project001 //创建一个基于webpack模板的新项目，可以用vue init webpack-simple my-project001 (该模板的的webpack配置更为简单)
npm install //注意此处不能用cnpm，避免部分依赖丢失
npm run build //该命令的配置信息在webpack文件中，打包之后可以将打包后得到的文件放到服务器，与后端结合
3、淘宝镜像安装方法
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue 全家桶

vue-router , vux , vue-loader , awesome-vue
$ npm install vue-router vue-resource vuex --save
安装vue全家桶，然后引入到项目中来。修改src/main.js 文件
import Vue from 'vue';
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.use(Vux);
new Vue({
el:'#app',
render : h=>h(App)
});
学习资源：

• vue.js中文论坛：https://forum.vuejs.org/c/chinese

• vue.js讨论组：https://gitter.im/vuejs/vue

• Docs for this template ：http://vuejs-templates.github.io/webpack/
  vue全家桶：

• vue-router: https://router.vuejs.org/zh-cn/

• vuex: https://vuex.vuejs.org/zh-cn/

• vuex的理解：https://www.cnblogs.com/y896926473/p/6709733.html

• vue-loader: https://vue-loader.vuejs.org/zh-cn/

• awesome-vue: https://github.com/vuejs/awesome-vue

安装vux -- 一个基于vue的weui框架

$ npm install vux --save
配置webpack.base.conf.js：

image.png

安装 axios

$ npm install axios --save
在引用axios的文件中配置：【在tool/ajax定义调用接口的方法时设置】
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

rem适配

在index.html中获取屏幕宽高，结合设计稿进行计算，搞定rem与px的转换

手机端适配插件

• amfe-flexible： 可伸缩布局方案（淘宝，网易都在用）
• postcss-pxtorem ： 提供不同参数设置来转换css中的px，rootValue用来定义转化时根元素的值

• autoprefixer: 自动加浏览器前缀

  
  
  

  image.png

image.png