采用vue創(chuàng)建項(xiàng)目的時(shí)候控制臺(tái)提示需要升級(jí)动壤，于是就笨頭笨腦的升級(jí)了，結(jié)果采用vue-cli3創(chuàng)建項(xiàng)目的時(shí)候出了一堆錯(cuò)誤辙售，頓時(shí)懵了肛鹏。于是開(kāi)始了解vue-cli3.x的相關(guān)知識(shí)，剛開(kāi)始還是好不習(xí)慣脂矫，不過(guò)習(xí)慣之后枣耀，發(fā)現(xiàn)vue-cli3.x挺好用的，不過(guò)到底是否采用vue-cli3.x還是vue-cli2.x庭再，還是看個(gè)人喜好了
首先
介紹一下相關(guān)的文檔
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用來(lái)動(dòng)態(tài)創(chuàng)建表單
創(chuàng)建項(xiàng)目
獲取vue-cli
npm install -g @vue/cli
npm install -g @vue/cli-service-global
創(chuàng)建項(xiàng)目
npm install -g @vue/cli-init
# vue init now works exactly the same as vue-cli@2.x
vue init webpack my-project
也可以采用新版本創(chuàng)建項(xiàng)目
vue create hello-world
不過(guò)這里是帶坑的捞奕，因?yàn)閯?chuàng)建項(xiàng)目有可能會(huì)保留之前的設(shè)置，所以盡量全部選項(xiàng)都看一遍拄轻。
實(shí)在不行的話颅围，還是使用原來(lái)的創(chuàng)建項(xiàng)目的方式
這里值得一提的是，采用eslint很可能會(huì)讓程序運(yùn)行失敗恨搓，所以對(duì)于初學(xué)者非常不友好院促，尤其是如果采用編輯器，如VSCode斧抱，進(jìn)行自動(dòng)格式化的話常拓，有可能與eslint的格式不一致，所以非郴云郑坑弄抬。
還沒(méi)入門(mén)，就被攔截在這里了宪郊。
接下來(lái)介紹一下VSCode下的解決方案：
- 在根目錄下創(chuàng)建文件：.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"], //引號(hào)類型 `` "" ''
"no-unused-vars": "warn", //把該條提示信息轉(zhuǎn)換成警告信息
"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界面
采用如下命令啟動(dòng)GUI界面
vue ui
GUI界面實(shí)際上可以服務(wù)于所有vue項(xiàng)目掂恕，可以導(dǎo)入之前的vue項(xiàng)目，然后切換當(dāng)前的vue項(xiàng)目：
同時(shí)還可以啟動(dòng)任務(wù)：
還可以搜索和安裝依賴弛槐，可以查詢到相對(duì)應(yīng)的文檔：
然后就可以開(kāi)開(kāi)森森順順利利的開(kāi)發(fā)項(xiàng)目了懊亡，基本上不需要敲命令，安裝依賴丐黄、刪除依賴斋配、運(yùn)行項(xiàng)目，都可以在GUI界面通過(guò)點(diǎn)擊完成灌闺，從而簡(jiǎn)化了開(kāi)發(fā)艰争，可以把更多的精力放到開(kāi)發(fā)中來(lái)
最后關(guān)于打包：
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)
}
...
