抛弃vue-webpack-template，踩坑Vue-Cli创建vue项目
2024-10-19 09:29:50
官方指导网站https://cli.vuejs.org/
一、全局安装@vue/cli
//本人包管理工具使用yarn
yarn global add @vue/cli
安装完成
二、创建vue项目
vue create projectName
三、开始踩坑
1 选择CSS预处理器，我这里选择sass
//参考cli.vuejs.org
yarn add sass sass-loader
使用sass的特性@mixin以及@include混入
2. eslint配置
默认配置在package.json文件里面，rules里面配置自己习惯的规则就好
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"quotes":[2,"double"],
"indent":[2,4]
}
},
3. 加入editorConfig来管理编辑器风格
以前都是webpack模板里面自带的根目录下的.editorconfig文件，现在就自己手动创建吧，
详细配置参考官网editorconfig.org，自己只配了最基础的
root = true
[*]
indent_size = 4
indent_style = space
小技巧：
vue inspect > output.js快速输出查看vue整体项目的配置
起步：项目根目录下创建vue.config.js
a. 配置类似webpack alias
const path = require("path")
module.exports = {
chainWebpack:(config)=>{
config.resolve.alias
.set("static",path.join(__dirname,"src/assets/"))
}
}
输出output.js可以看到alias里面多了static
补充自己的配置
// vue.config.js
// 首先关键的是加入alias,这样自己import的时候就可以简写
chainWebpack:(config)=>{
config.resolve.alias
.set("static",path.join(__dirname,"src/assets/"))
}
// jsconfig.json
// 配置完成后重启vscode 此时可以通过control+leftClick跳转进目标文件,
// 默认只能默认跳转js文件，跳转vue需要import时写全文件格式后缀
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"static/*":["src/assets/*"]
},
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
最新文章
- 自制文件上传JS控件，支持IE、chrome、firefox etc.
- Asp.Net Core 项目实战之权限管理系统（0） 无中生有
- 关于面试别问及Spring如何回答思路总结！
- linux 命令行启动虚拟机
- 移动端HTML5资源整理
- 使用Gradle自动发布Java Web到SAE
- Nopcommerce主要的技术
- ubuntu修改hostname
- 通过CDC获取 HDC
- 洛谷P1156 垃圾陷阱
- C++学习4
- VB调用控制面板
- GDKOI2015 Day2
- java学习之匿名内部类与包装类
- dubbo&hsf&spring-cloud简单介绍
- Redis --> 为redis分配新的端口
- osx免驱网卡推荐
- BZOJ2084 [Poi2010]Antisymmetry Manachar
- 【Python】xpath-1
- RabbitMQ入门_14_Policies