说明:之前两天属于入门,文章可能存在片段信息
vue2.x+webpack快速搭建前端项目框架详解 http://www.jb51.net/article/129463.htm
Vue cli + Webpack-simple 怎么修改生产环境下运行的端口?
https://segmentfault.com/q/1010000012994924
webpack和webpack-simple区别(如何引入css文件)
https://www.cnblogs.com/xuange306/p/7114945.html
Vue2.0小白入门教程
https://ke.qq.com/course/256052#term_id=100301895
https://www.cnblogs.com/grimm/p/5767945.html
1.镜像
在使用npm之前,最好把镜像换成淘宝的,长久使用,跑一下命令: npm config set registry https://registry.npm.taobao.org 替换成功后跑命令: npm config get registry 显示淘宝镜像路径的话就代表替换成功
2.
安装依赖npm install
三、添加相应的框架以及依赖
1.引入sass预编译工具加快编码速度,跑命令npm install node-sass --save-dev, npm install sass-loader --save-dev,如果node-sass比较难装的话可以换成cnpm来下载依赖,具体可百度下做法。
操作:
在components目录下新建一个header的目录,新建两个文件header.vue header.scss,然后引入到app.vue中使用,因为vue讲的是模块化开发,所以我喜欢把样式跟组件放到一个文件夹里跟其他模块区分,
App.vue:
header.scss:
这样就证明sass 是安装成功了。
2.引入axios接口请求框架,跑命令npm install axios --save-dev,npm install qs;
然后在src目录下新建一个http.js文件进行接口请求的相关配置,
import Vue from 'vue' import axios from 'axios' import Qs from 'qs'; var instance = axios.create({ //baseURL: 'https://some-domain.com/api/', timeout: timeout, responseType: 'json', // default, //headers: {'apikey': 'foobar'}, transformRequest:function(data,headers){ //为了避免qs格式化时对内层对象的格式化先把内层的对象转为 //由于使用的form-data传数据所以要格式化 if (typeof data == 'string') { headers.post['Content-Type'] = "application/json; charset=utf-8"; } else if(!(data instanceof FormData)){ headers.post['Content-Type'] = "application/x-www-form-urlencoded"; for(let key in data){ if(data[key]===undefined){ data[key]=null; } } data = Qs.stringify(data); } return data; } }); export default instance; Vue.prototype.$http=instance;
在使用请求接口的时候直接可以这样用:(具体用法可以看下官方文档)
this.$http.get(url).then((res)=>{ })
3.引入elementUI,跟人感觉elementUI是比较好用的vue组件UI,很多东西不用自己去写,推荐使用,跑指令npm install element-ui --save,
然后在main.js中引入使用
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI)
当然也可以按需引入,想用什么组件就引入什么组件,不要全部引入,这样减少体积。
4.引入vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
安装:npm install vuex --save