採用vue創建項目的時候控制檯提示需要升級，於是就笨頭笨腦的升級了，結果採用vue-cli3創建項目的時候出了一堆錯誤，頓時懵了。於是開始瞭解vue-cli3.x的相關知識，剛開始還是好不習慣，不過習慣之後，發現vue-cli3.x挺好用的，不過到底是否採用vue-cli3.x還是vue-cli2.x，還是看個人喜好了
首先
介紹一下相關的文檔
vue-cli3.x官方文檔： https://cli.vuejs.org/
vue.js 官方文檔 https://cn.vuejs.org/v2/guide/
另外配合vue使用的一些依賴：
element-ui https://element.eleme.cn/2.0/#/zh-CN/component/installation
@form-create/element-ui http://www.form-create.com/v2/element-ui/
vue-router https://router.vuejs.org/
其中form-create用來動態創建表單
創建項目
獲取vue-cli
npm install -g @vue/cli
npm install -g @vue/cli-service-global
創建項目
npm install -g @vue/cli-init
# vue init now works exactly the same as [email protected]
vue init webpack my-project
也可以採用新版本創建項目
vue create hello-world
不過這裏是帶坑的，因爲創建項目有可能會保留之前的設置，所以儘量全部選項都看一遍。
實在不行的話，還是使用原來的創建項目的方式
這裏值得一提的是，採用eslint很可能會讓程序運行失敗，所以對於初學者非常不友好，尤其是如果採用編輯器，如VSCode，進行自動格式化的話，有可能與eslint的格式不一致，所以非常坑。
還沒入門，就被攔截在這裏了。
接下來介紹一下VSCode下的解決方案：
- 在根目錄下創建文件：.prettierrc
{
"semi": false
}
- 編輯文件：.eslintrc.js
// required to lint *.vue files
plugins: ["vue"],
// add your custom rules here
rules: {
// allow async-await
"generator-star-spacing": "off",
// allow debugger during development
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
quotes: [1, "double"], //引號類型 `` "" ''
"no-unused-vars": "warn", //把該條提示信息轉換成警告信息
"vue/prop-name-casing": ["error", "camelCase"],
"space-before-function-paren": ["error", "ignore"],
// or
"space-before-function-paren": [
"error",
{
anonymous: "ignore",
named: "ignore",
asyncArrow: "ignore"
}
]
}
- 安裝VSCode插件：Slints VSCode Snippets
https://marketplace.visualstudio.com/items?itemName=slints.SlintsVSCodeSnippets
添加配置：settings.json
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
"javascript",
"vue"
]
}
vue-cli3 GUI界面
採用如下命令啓動GUI界面
vue ui
GUI界面實際上可以服務於所有vue項目，可以導入之前的vue項目，然後切換當前的vue項目：
同時還可以啓動任務：
還可以搜索和安裝依賴，可以查詢到相對應的文檔：
然後就可以開開森森順順利利的開發項目了，基本上不需要敲命令，安裝依賴、刪除依賴、運行項目，都可以在GUI界面通過點擊完成，從而簡化了開發，可以把更多的精力放到開發中來
最後關於打包：
config/index.js / build:
...
assetsSubDirectory: "./static",
assetsPublicPath: "./",
...
build/util.js / function generateLoaders(loader, loaderOptions):
...
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: "vue-style-loader",
publicPath: "../../" // 這裏添加
})
} else {
return ["vue-style-loader"].concat(loaders)
}
...