採用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
不過這裏是帶坑的,因爲創建項目有可能會保留之前的設置,所以儘量全部選項都看一遍。
實在不行的話,還是使用原來的創建項目的方式
這裏值得一提的是,採用slint
很可能會讓程序運行失敗,所以對於初學者非常不友好,尤其是如果採用編輯器,如VSCode,進行自動格式化的話,有可能與slint的格式不一致,所以非常坑。
還沒入門,就被攔截在這裏了。
接下來介紹一下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)
}
...