vue-cli搭建项目环境

Vue-cli搭建项目环境

提示 : 复制命令时注意空格,博主的空格可能不是那么规范

1.安装node.js ,使用node -v检测node.js是否安装完成,出现版本号则表示安装成功

2.建议安装淘宝镜 npm install cnpm -g --registry=http://registry.npm.taobao.org
若已安装,以下所有 npm改写为cnpm

3.安装webpack ,在项目目录里打开命令行输入 npm i webpack –g ,安装完成后输入webpack –v检测是否安装完成,出现版本号则表示安装成功

4.安装vue-cli脚手架构建工具, 打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功

5.创建项目目录 vue init webpack 项目名称
若无需其他操作,全部默认即可(一直按回车)

6.若需要使用 vue-resource
在项目目录中打开cmd命令行 输入 npm install vue-resource --save-dev安装插件,在main.js中引入
import VueResource from ‘vue-resource’
Vue.use(VueResource)

7.若需要使用 axios
在项目目录中打开cmd命令行 输入 npm install axios –S
import axios from ‘axios’
Vue.prototype.$ajax = axios

8.若要使用 rem 布局 (这里使用750设计稿)
在 src/router/index.js文件中添加
fnResize();
window.onresize = function () {
fnResize();
}
function fnResize () {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth ;
if (deviceWidth >= 750) {
deviceWidth = 750;
}
if (deviceWidth <= 320) {
deviceWidth = 320;
}
document.documentElement.style.fontSize = (deviceWidth / 7.5) + ‘px’;
}

写css时就可以将px换为rem , 这里1rem=100px
Vue-cli3.0 rem的使用
首先安装 amfe-flexible插件,并在main.js中引用
安装 npm i amfe-flexible
引用 import ‘amfe-flexible’
然后安装 postcss-px2rem插件
npm i postcss-px2rem
在package.js中配置

"postcss": {
“plugins”: {
“autoprefixer”: {},
“postcss-px2rem”: {
“remUnit”: 7.5
}
}
}

9. 启动项目 ：npm run dev
   输入端口 localhost:8080 访问
   输入npm run dev后想要让项目自动在浏览器打开
   在config/index.js中找到 autoOpenBrowser:false一项
   将false改为true就好了