vue-cli3腳手架工具升級以后 更加方面和簡單化
第一 nodejs版本要求
nodejs 需要在版本8.9.1以上或者更高的版本 推薦使用8.9.11 版本
可以使用nvm來安裝管理 node 多個(gè)版本。
第二 vue-cli 修改為 vue/cli
需要先卸載vue-cli2
npm uninstall vue-cli -g 卸載
npm install -g ＠vue/cli 安裝腳手架
vue --version 查看vue版本
第三 創(chuàng)建項(xiàng)目
vue create vuecli3demo
你會(huì)被提示選取一個(gè) preset媒惕。你可以選默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset冯勉，也可以選“手動(dòng)選擇特性”來選取需要的特性
一般 我們選擇第二個(gè) 上下鍵來選擇 這個(gè)默認(rèn)的設(shè)置非常適合快速創(chuàng)建一個(gè)新項(xiàng)目的原型咽扇，而手動(dòng)設(shè)置則提供了更多的選項(xiàng)钻蔑，它們是面向生產(chǎn)的項(xiàng)目更加需要的
選擇安裝后 會(huì)出現(xiàn)如下圖片 下面的安裝可以 上下鍵 在按空格鍵 來是否選擇 安裝當(dāng)前插件 安裝即可
繼續(xù)等待安裝完成 就得到我們的項(xiàng)目文件目錄了
第四 ：如果我們還需要使用vue-cli2.0的項(xiàng)目怎么辦
vue-cli給我們做了一個(gè)橋接工具我們安裝即可
npm install -g @vue/cli-init 安裝使用vue-cli2.0 版本
第五 安裝成功完成后
cd vuecli3demo
npm run serve 啟動(dòng)項(xiàng)目
如果是使用ui來啟動(dòng) 創(chuàng)建項(xiàng)目 管理也可以
命令是 vue ui 啟動(dòng)即可
第六 ： 項(xiàng)目文件 結(jié)構(gòu)
|-- dist # 打包后文件夾
|-- public # 靜態(tài)文件夾
| |-- favicon.ico
| |-- index.html #入口頁面
|-- src # 源碼目錄
| |--assets # 模塊資源
| |--components # vue公共組件
| |--views
| |--App.vue # 頁面入口文件
| |--main.js # 入口文件拧抖，加載公共組件
| |--router.js # 路由配置
| |--store.js # 狀態(tài)管理
|-- .env.pre-release # 預(yù)發(fā)布環(huán)境
|-- .env.production # 生產(chǎn)環(huán)境
|-- .env.test # 測試環(huán)境
|-- vue.config.js # 配置文件
|-- .eslintrc.js # ES-lint校驗(yàn)
|-- .gitignore # git忽略上傳的文件格式
|-- babel.config.js # babel語法編譯
|-- package.json # 項(xiàng)目基本信息
|-- postcss.config.js # CSS預(yù)處理器(此處默認(rèn)啟用autoprefixer)
第七 ：自己創(chuàng)建一個(gè)vue-config.js 基礎(chǔ)配置如下
