脚手架版本:vue-cli3
1 创建项目
1.1 命令创建项目
terminal输入:vue create project-name
接下来会进行一个preset选择
default(快速搭建项目原型)
manually(手动进行项目配置)
1.2 使用图形化界面创建管理项目
terminal输入:vue ui
2 安装项目依赖以及配置
npm install axios //请求
npm install vconsole //log
nom install vue-router //路由
PxToRem依赖:
npm install postcss-pxtorem
npm install lib-flexible
项目中vue.config.js是可选项,在package.json同目录下创建该文件vue.config.js
在vue.config.js做css配置
module.exports = {
css:{
loaderOptions:{
postcss:{
plugins: [
// 把px单位换算成rem单位
require("postcss-pxtorem")({
rootValue: 37.5,
selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
propList: ["*"], //可以从px更改为rem的属性。
minPixelValue: 2 // 设置要替换的最小像素值。
})
]
}
}
}
}
在main.js 引入 import "lib-flexible/flexible.js
3 路由配置
src下创建router/index.js
import Vue from 'vue'
import Router from 'vue-router'
//引入组件模块
import Hello from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes:[
{path:'/hello',name:'',component: Hello}
]
})
在main.js引入 import router from './router'
4 项目webpack配置在vue.config.js中 参考链接:https://cli.vuejs.org/zh/guide/webpack.html
5 项目启动打包参见package.json的scripts 参考链接:https://cli.vuejs.org/zh/guide/cli-service.html