vue官网
1、创建项目
创建最新稳定版本
npm create vue@latest
如果卡住不动 查看npm代理
npm config get registry
更换代理
npm config set registry=https://registry.npmmirror.com
2、根据自己的需要选择当前的配置
3、打开项目看一下脚本
使用的是vite脚手架,不是我想要的 我想要的是vue-cli
vite和vue-cli的区别可以参考 这位博主滴
4、使用vue-cli脚手架创建vue3.0项目
vue create XXXX
回车,看一下配置,这下就对辣~~
5、安装路由和请求
npm install XXX
6、使用eslint代码自动检测,主要是保存的时候自动格式化、引入的组件没有使用警告、重复命名
(1)生成.eslintrc.js文件
npx eslint --init
(2)配置.eslintrc.js文件
module.exports = {
'root': true,
'env': {
'browser': true,
'es2021': true,
'commonjs': true,
'es6': true
},
'extends': [
'eslint:recommended',
'plugin:vue/vue3-essential'
],
'parserOptions': {
'ecmaVersion': 12,
'sourceType': 'module'
},
'plugins': [
'vue'
],
'rules': {
'no-cond-assign': 2, // 禁止:在条件表达式中使用赋值语句
'no-dupe-args': 2, // 禁止:函数参数重名
'no-unused-vars': 2, // 禁止:未使用过的变量
'semi': ['error', 'always'], // 禁止:必须有分号
// 'no-console': 1, // 警告:代码中存在console.log
'no-unreachable': 0, // 警告:有无法执行的代码
'quotes': ['warn', 'single'], // 警告:字符串单引号
'indent': ['off', 4], // 关闭:缩进4个空格
'linebreak-style': ['off', 'unix'] // 关闭:换行符
}
};
(3)vscode下载eslint插件
(4)修改vscode本地的setting.json
{
"editor.fontSize": 18,
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"eslint.validate": [
"javascript",
"html",
"vue"
],
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
至此eslint配置结束,编辑一下看看效果,不起作用的话重启电脑!!!
安装element-plus
npm install element-plus --save
按照官网的步骤来,这里我们选择自动导入
项目中现在没有webpack.config.js文件,现在是使用vue.config.js中配置webpack
const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = defineConfig({
// 打包时不生成.map文件 避免看到源码
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
new CompressionPlugin({
test: /\.js$|\.html$|\.css/, // 匹配文件
threshold: 10240, // 对超过10k文件压缩
}),
new MiniCssExtractPlugin({
filename: `css/[name].${Timestamp}.css`,
chunkFilename: `css/[name].${Timestamp}.css`,
}),
],
},
});
运行项目:
npm run dev
报错:TypeError: AutoImport is not a function 为啥子呢??因为安装的插件版本太高了,降版本
npm list unplugin-auto-import
npm install unplugin-auto-import@0.16.1
npm install unplugin-vue-components@0.25.2
elementUI配置完成~