一、基础步骤
1、安装vue/cli
# 先安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g @vue/cli
# 版本验证
vue -V 或 vue --version // 使用vue3时,@vue/cli版本必须高于4.5.0
# 安装yarn
npm install -g yarn
2、创建项目并运行
### webpack方式创建项目 ### vue create xxx #自定义选项 (*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex ( ) CSS Pre-processors ( ) Linter / Formatter ( ) Unit Testing ( ) E2E Testing #运行 npm run serve ### vite 方式创建项目 ### vue init vite-app xxx cd 进入目录 cnpm i #运行 npm run dev
3、启动端口配置
### 根目录创建 vue.config.js module.exports = { devServer:{ port:3333, // 启动端口 open:true // 启动后是否自动打开网页 } }
4、安装插件
Vetur // [必选]语法高亮、智能感知、格式化(Alt+Shift+F)
EsLint // 语法纠错
JavaScript(ES6) code snippets // ES6语法智能提示以及快速输入
HTML CSS Support // 自动补全html、css代码
GitLens -- Git Supercharged // 查看git文件提交历史
5、VSCode 代码format设置
### settings.json { // #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F "editor.formatOnSave": false, //设置tab的缩进为2 "editor.tabSize": 2, // #每次保存的时候将代码按eslint格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], // #去掉代码结尾的分号 "prettier.semi": false, // #使用带引号替代双引号 "prettier.singleQuote": true, "prettier.tabWidth": 4, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vue中的js按"prettier"格式进行格式化 "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true } }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // 格式化stylus, 需安装Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒号 "stylusSupremacy.insertSemicolons": false, // 是否插入分号 "stylusSupremacy.insertBraces": false, // 是否插入大括号 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行 "stylusSupremacy.insertNewLineAroundBlocks": false, "prettier.useTabs": true, "files.autoSave": "off", "explorer.confirmDelete": false, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "diffEditor.ignoreTrimWhitespace": false, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } // 两个选择器中是否换行 }
6、提交git
git init git add . git commit -m "first commit" git remote add origin https://xxxx/xxx/xxx.git git push -u origin master
7、安装并引入 elment plus
cnpm install element-plus --save ### 配置main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
8、整体设置全局背景
### App.vue ### <template> <div id="app"> <router-view /> </div> </template> <style> #app { 100%; height: 100%; } html, body { margin: 0; padding: 0; 100%; height: 100%; } </style>