Vue cli3 0專案建立

之前寫過一篇文章vue-cli專案建立,主要是針對vue-cli3.0版本之前的，由於現在vue-cli版本更新到了3.0，而且建立專案的一些情況也發生了變化，所以本篇將在基於vue-cli3.0以上版本建立專案，大家可以參考一下vue-cli2.0版本（這裡的vue-cli3.0版本之前統稱為2.0版本）和vue-cli3.0版本的不同之處，不要混淆了。

大家也可以進入vue-cli3官網進行檢視相關資訊。

這裡不介紹vue-cli3.0專案所需的node.js那些安裝了，但是node.js版本必須是8.9 或更高版本(推薦 8.11.0+)，大家還不清楚的話就去檢視我之前寫的文章vue-cli專案建立，會有說明。

在安裝之前我們來介紹一下vue-cli:

乙個豐富的官方外掛程式集合，整合了前端生態中最好的工具。

一套完全圖形化的建立和管理vue.js專案的使用者介面

安裝vue-cli3.0專案的命令的一些改變記錄一下。開啟git bash here

$ npm install -g @vue/cli  # -g或者global 表示全域性安裝

#或者$ cnpm install -g @vue/cli
#或者$ yarn global add @vue/cli # 必須先安裝yarn

$ cnpm install --global vue-cli

1.安裝cli-service-global

$ npm install -g @vue/cli-service-global

#或者$ cnpm install -g @vue/cli-service-global

$ vue serve

$ vue server hello.vue # 必須要指定哪個.vue檔案

$ vue build

$ vue build hello.vue

$ vue init webpack vuefirstdemo #這是基於webpack

$ vue create helloworld

建立完成後，直接執行

打包上線

$ npm run build

|—node-modules：依賴的node庫檔案

|—public：公共檔案，如index.html入口檔案
|—src
|—assets：資源檔案img、css、html等等
|—component：元件
|—main.js：主函式入口檔案
|—package.json：專案描述檔案

# `vue init` 的執行效果將會跟 `[email protected]` 相同

$ vue init webpack my-project

在前面我所講的vue-cli2專案建立大家可以去檢視一下,總結他們的區別。

。

vue cli 3 0 安裝和建立專案流程

使用前我們先了解下3.0較2.0有哪些區別 注意 vue cli 3 和舊版使用了相同的vue命令，所以 vue cli 2 vue cli 被覆蓋了。如果你仍然需要使用舊版本的vue init功能，你可以全域性安裝乙個橋接工具 npm install g vue cli init vue init...

vue cli 3 0 學習筆記

專案搭建及結構 安裝npm install g vue cli 新增專案 vue create my project 啟動 npm run server 打包 npm run build vue cli3.0 自定義腳手架模板 vue cli3.0 新出的新增外掛程式方法 npm install a...

Vue cli3專案建立

ps 如果之前安裝有cli2需要先解除安裝cli2才能安裝cli3 cli4 準備工作 檢視當前版本 vue v 或者 vue version1 安裝 解除安裝 cli2 全域性安裝 npm install vue cli g 全域性解除安裝 npm uninstall vue cli g cli3...