Vue-cli 基础使用
介绍
- 现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建 vue 的开发环境。一般情况下我们都会选择使用 webpack 进行项目的构建,在这里我们直接使用 vue 官方提供的,基于 webpack 的脚手架工具进行项目开发。
安装
- 全局安装 vue-cli
$ npm install -g @vue/cli
# 或者
$ yarn global add @vue/cli
- 安装检测
$ vue -V
利用脚手架创建项目
$ vue create 项目名称
# 或者以当前文件夹创建项目
$ vue create .
- 项目中常用命令
# 开发环境构建
$ npm run serve
# 生产环境构建
$ npm run build
# esLent 代码检测工具自动修复
$ npm run lint
- style 标签属性
- scoped:css 样式局部生效
- lang=“scss” 支持 scss 语法
注意:如果需要 scoped 渗透,即:给子组件或第三方组件修改样式,在 node-sass 中用 /deep/;当然,也可以另写一个 style 标签,不使用 scoped 属性,那么这里写的样式就是全局样式,可以覆盖子组件的样式了
-
关闭 esLint 检测
需要在项目根目录同级,创建 vue.config.js 文件,书写以下代码:
module.exports = {
devServer: {
overlay: { // 关闭浏览器错误遮罩层
warnings: false,
errors: false
}
},
lintOnSave: false // 直接关闭 eslint 检查
}
- proxy 代理配置
module.exports = {
devServer: {
open: true, // 自动开启浏览器
port: 8080, // 随便改端口号
proxy: {
'/api': {
target: 'https://xxxxx.com', // 目标主机
changeOrigin: true, // 是否改变源地址
pathRewrite: { // 路径重写
'^/api': ''
}
}
}
}
}
- alias 别名配置
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets', // @:指代 src 目录
'con': '@/components',
'views': '@/views',
}
}
}