【vue-cli搭建vue項目的過程2.x】

vue-cli搭建vue項目

vue-cli搭建vue項目
- 安裝node
- 安裝vue-cli腳手架并創建項目
- 安裝 Ant Design Vue或element-ui(筆者使用Ant-design-vue組件，并全局引入)
- 開發安裝三方庫包
- - 1、Package.json文件---引入如下package.json文件執行npm i或npm install命令即可下載如下依賴
  - 2、Vue.config.js文件
  - 3、.eslintrc.js文件---vue2老項目增加eslint配置代碼規范
  - - （1）安裝以下eslint插件，并增加.eslintrc.js配置文件，.eslintignore配置忽略檢查的文件
    - （3）package.json相關代碼
    - （4） vscode的配置-----配置eslint、prettier插件（Extensions安裝）；setting.json文件的配置（項目配置新建setting.json文件、或用戶配置則修改vscode平臺的setting）；
    - （5）啟動項目
  - 4、.eslintignore忽略語法檢查
- 報錯信息
- - 1、Uncaught runtime errors:通常由Vue 版本的不匹配引起的

vue-cli搭建vue項目

vue-cli文檔地址

安裝node

運行node -v與npm -v查看版本
國內兩種方式安裝第三方依賴：(1)安裝yarn后使用yarn安裝依賴
npm i -g yarn
npm install  xxx = yarn xxx
(2)修改鏡像后用npm 安裝第三方依賴//查看 當前鏡像
npm config get registry// 修改 鏡像文件
npm config set registry https://registry.npmmirror.com

在這里插入圖片描述

安裝vue-cli腳手架并創建項目

npm install -g @vue/cli
# OR
yarn global add @vue/cli

在這里插入圖片描述
執行上述命令安裝完腳手架后，關閉命令行，在vue項目的文件夾目錄中重新打開cmd窗口新建vue項目（先查看vueCli版本后再新建，若版本不一致則卸載vuecli重新安裝，筆者如下版本，選擇:鏡像安裝、2.x、npm）

// 查看vueCli版本
vue -V
// 新建vue項目-- 項目名稱不能駝峰命名，只能中劃線和小寫
vue create my-app

在這里插入圖片描述

安裝 Ant Design Vue或element-ui(筆者使用Ant-design-vue組件，并全局引入)

引入 ant-design-vue，參考文檔-快速上手
安裝Ant Design Vue（筆者使用的1x.antdv.com/docs/vue/getting-started-cn）
注意 antd.css 是針對Ant Design Vue 1.x 版本

npm install ant-design-vue --save
# OR
npm i --save ant-design-vue@next
# OR
npm i --save ant-design-vue

完整引入–main.js文件 (原文件中另外引入了 Antd的js和css以及 app.use(Antd))

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
// 筆者引入antd.css 報錯  Error: Can't resolve 'ant-design-vue/dist/antd.css'
//import 'ant-design-vue/dist/antd.css';
// antd.css替換為  reset.css
import 'ant-design-vue/dist/reset.css';Vue.config.productionTip = false
Vue.use(Antd)new Vue({render: h => h(App),
}).$mount('#app')

npm run serve運行若報錯如下：Error: Can’t resolve ‘ant-design-vue/dist/antd.css’
解決方案：去當前項目的node_modules 下路徑 ‘ant-design-vue/dist’是否真的沒有 antd.css，則替換為本地存在的 reset.css;(類似找不到文件錯誤就去實際地址看看是否真的沒有，若沒有則卸載后重裝指定版本，或替換為地址中其他文件）
注意筆者的main.js文件（筆者創建的是2.x需匹配低版本的組件庫）如下：

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';Vue.config.productionTip = false
Vue.use(Antd)new Vue({render: h => h(App),
}).$mount('#app')

package.json截圖如下
在這里插入圖片描述

安裝并引入 elementUI
引入elementUI，參考文檔–快速上手

npm i element-ui -S

完整引入–main.js文件 (原文件中另外引入了 elementUI的js和css以及Vue.use(ElementUI)😉

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

成功運行頁面如下：可以開始業務場景的開發啦（引入router等其他依賴）
在這里插入圖片描述

開發安裝三方庫包

安裝指定版本庫（npm install eslint@8.57.0 eslint-plugin-vue@9.25.0 babel-eslint@10.1.0 --save-dev
）；新項目開發時需要用到echarts則引入；快速搭建基本vue項目可直接使用下方的package.json替換本地同名文件，執行npm i安裝package.json中的dependencies/devDependencies即可使用相關的組件庫，后續也可加入其他組件庫(npm install xxx --save-dev 或 npm install xxx --save兩者區別有興趣可以查查)

// eslint代碼規范
npm install eslint eslint-plugin-vue babel-eslint --save-dev
npm install @babel/eslint-parser --save-dev
npm install @vue/cli-plugin-eslint --save-dev
//css 
npm install less-loader --save-dev
npm install less --save-devnpm install echarts --save

1、Package.json文件—引入如下package.json文件執行npm i或npm install命令即可下載如下依賴

{"name": "xinlin-swyth-app-web2.0","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"main": ".eslintrc.js","dependencies": {"ant-design-vue": "^1.7.8","axios": "^1.7.1","core-js": "^3.8.3","crypto-js": "^4.2.0","echarts": "^5.5.0","js-cookie": "^3.0.5","vue": "^2.6.14","vue-router": "^3.5.1","vuex": "^3.6.2"},"devDependencies": {"@babel/eslint-parser": "^7.24.5","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "^5.0.8","@vue/cli-plugin-router": "~5.0.0","@vue/cli-plugin-vuex": "~5.0.0","@vue/cli-service": "~5.0.0","babel-eslint": "^10.1.0","eslint": "^9.3.0","eslint-plugin-vue": "^9.26.0","less": "^4.2.0","less-loader": "^12.2.0","sass": "^1.32.7","sass-loader": "^12.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]
}

2、Vue.config.js文件

const { defineConfig } = require("@vue/cli-service")
const path = require("path")
const webpack = require("webpack")function resolve(dir) {return path.join(__dirname, dir)
}module.exports = defineConfig({lintOnSave: false,transpileDependencies: true,publicPath: "/",configureWebpack: (config) => {config.devtool = "source-map"Object.assign(config.resolve, {alias: {"@": resolve("src"),},})// 不打包md文件config.module.rules.push({test: /\.md$/i,loader: "file-loader",options: {emitFile: false,},})config.module.rules.push({test: /\.mjs$/,include: /node_modules/,type: "javascript/auto",})// Ignore all locale files of moment.js// config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) // 當前不支持該格式config.plugins.push(new webpack.IgnorePlugin({resourceRegExp: /^\.\/locale$/,contextRegExp: /moment$/,}),)// config.plugins.push(createThemeColorReplacerPlugin())config.plugins.push(new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery",}),)},
})

3、.eslintrc.js文件—vue2老項目增加eslint配置代碼規范

過程如下：

（1）安裝以下eslint插件，并增加.eslintrc.js配置文件，.eslintignore配置忽略檢查的文件

1、 eslint用于檢查和標示出ECMAScript/JavaScript代碼規范問題工具
2、 @babel/eslint-parser簡而言之就是一個解析器，允許您使用ESLint對所有有效的Babel代碼進行檢查。ESLint允許使用自定義解析器，當使用此插件時，代碼會被Babel解析器解析，并且生成的AST被轉換成一個ESLint可以理解的符合ESTree的結構，所有的位置信息如行列也會保留，因此可以輕松的追蹤錯誤
3、 eslint-plugin-vue Vue.js的官方ESLint插件,即使用eslint檢查.vue文件的template和script
4、 eslint-config-prettier或者@vue/eslint-config-prettier [筆者未安裝]
當prettier與eslint有些規則沖突時，使用prettier的規則進行覆蓋
其中@vue/cli-plugin-eslint是特別為@vue/cli&create vue setups使用而設計的
5、 @vue/cli-plugin-eslint vue-cli的eslint 插件，檢查和修復文件
eslintrc.js文件配置、eslintignore文件的配置
（2）安裝prettier，并增加.prettierrc.js文件
代碼格式化工具，通過.prettierrc.js文件進行配置代碼規范 .prettierrc.js相關配置如下

//配置參照 https://prettier.io/docs/en/options.html
module.exports = {tabWidth: 2, // tab 使用兩個空格endOfLine: "auto", // 保持現有的行尾useTabs: false, // 不使用制表符縮進，使用空格縮進semi: true, // 代碼需要分號結尾singleQuote: true, // 單引號bracketSpacing: true, // 對象左右兩側需要空格jsxBracketSameLine: false, // html 關閉標簽換行arrowParens: 'avoid', // 單參數的箭頭函數參數不需要括號proseWrap: 'never', // markdown文檔不換行trailingComma: 'none' // 結尾處不加逗號}

（3）package.json相關代碼

（4） vscode的配置-----配置eslint、prettier插件（Extensions安裝）；setting.json文件的配置（項目配置新建setting.json文件、或用戶配置則修改vscode平臺的setting）；

{// 用于保存時使用進行代碼格式化"editor.codeActionsOnSave": {"source.fixAll": true,},// 用于vscode右下角工具欄展示eslint標識"eslint.alwaysShowStatus": true,
}

（5）啟動項目

由于是在老項目中增加eslint規范，所以要實現以下兩點
第一，其他開發伙伴可輕松使用，需參照以下步驟：確保安裝eslint、prettier插件；確保vscode的setting.json文件中的source.fixAll配置為true；刪除本地node_modules；npm i重新安裝依賴；
第二，因為舊代碼有很多代碼不規范，為了控制臺清爽，也為了提高啟動速度，需要將vue.config.js中的lintOnSave設置為false，即運行時不啟用lint

該點–3如上轉載自文章鏈接

筆者.eslintrc.js文件如下：

const IS_PROD = process.env.NODE_ENV === "production"
module.exports = {root: true,env: {node: true,},extends: ["plugin:vue/essential", "@vue/standard"],parserOptions: {parser: "babel-eslint",},rules: {// 自定義規則semi: ["error", "never"],// 分號camelcase: "off","no-new": "off","no-console": IS_PROD ? "warn" : "off","no-debugger": IS_PROD ? "error" : "off","no-unreachable": IS_PROD ? "error" : "warn",// 提前return"prefer-promise-reject-errors": "off","standard/no-callback-literal": "off","no-unused-vars": IS_PROD ? "error" : "warn","comma-dangle": ["error", "only-multiline"],// 末尾逗號"space-before-function-paren": ["error",{anonymous: "ignore",named: "never",asyncArrow: "always", // async箭頭函數},],"generator-star-spacing": "off","no-tabs": "off","no-irregular-whitespace": "off",// "vue/no-template-key": "off",// "vue/no-v-for-template-key": "off",// "vue/no-unused-components": "off",// "vue/no-unused-vars": "off",// "vue/require-v-for-key": "off",// "vue/valid-v-for": "off","vue/multi-word-component-names": ["warn"],eqeqeq: "warn",quotes: "off",},
}

4、.eslintignore忽略語法檢查

/* .eslintignore內容,根據實際情況修改:# 忽略xxx目錄下文件的語法檢查 */
src/assets
src/icons
src/tools
public
dist
node_modules
*.md
*.html

報錯信息

1、Uncaught runtime errors:通常由Vue 版本的不匹配引起的

ERROR (0 , vue__WEBPACK_IMPORTED_MODULE_2__.createVNode) is not a function
TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_2__.createVNode) is not a function
at eval (webpack-internal:///./node_modules/ant-design-vue/es/empty/index.js:36:73)

在這里插入圖片描述
解決方法： 降低 Ant Design Vue 的版本[新安裝的版本為4.2.1，降為"ant-design-vue": “^1.7.8”，推薦卸載當前版本后再安裝指定版本]，降低版本后，完整引入ant-design-vue組件時需要修改為安裝路徑下有的css–import ‘ant-design-vue/dist/antd.css’;
如下
“dependencies”: {
“ant-design-vue”: “^1.7.8”,
“core-js”: “^3.8.3”,
“vue”: “^2.6.14”
}
PS: 通常情況下，你不需要先卸載當前版本的 Ant Design Vue，你可以直接安裝指定版本，npm 會處理版本的切換和依賴關系。
但有時為了避免潛在的問題，你也可以選擇先卸載當前版本再安裝指定版本。這樣做并不會有什么壞處，而且可以確保干凈地切換到目標版本。你可以使用以下命令來卸載當前版本：
npm uninstall ant-design-vue
再安裝指定版本：npm install ant-design-vue@1.7.8 --save