注意:window环境下使用自带命令行 ,不要用git bash(自定义的时候无法选择)
步骤1:安装node vue-cli 略过哦...
步骤2:到指定目录下,使用vue create project(项目名称) 创建
步骤3:自定义模式选择你需要的组件
3.1 default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包
Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包
3.2 选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的(方便遇到问题时百度),简介如下:
是否使用history router:
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)
3.3 css预处理器
主要为css解决浏览器兼容、简化CSS代码 等问题
3.4 ESLint:
提供一个插件化的javascript代码检测工具,ESLint + Prettier //使用较多
何时检测:
3.5 搭建完成:
步骤4: 搭建完成后发现目录结构有很大变化(build、config直接没啦) 莫着急
在根目录下手动增加vue.config.js文件夹,代码如下
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
//路径配置
config.resolve.alias
.set('assets', resolve('src/assets'))
.set('styles', resolve('src/assets/styles'))
},
// webpack-dev-server 相关配置
devServer: {
// 调试端口
port: 8090,
proxy: {
"/api": { // 代理接口前缀为/apis的请求
"target": 'http://localhost:3000/', // 对应的代理地址
"secure": false, // 接受运行在https上,默认不接受
"changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
"pathRewrite": { //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
'^/api': ''
}
},
}
},
//第三方插件配置....
pluginOptions: {
}
//其他配置....
}
npm run serve 跑起来跑起来!!!