1. 程式人生 > >使用@vue/cli初始化專案

使用@vue/cli初始化專案

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全域性安裝了舊版本的 vue-cli (1.x 或 2.x),你需要先通過

 npm uninstall vue-cli -g

 

  解除安裝它。附上vue-cli官方文件地址

首先檢查你的node版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+),命令為

node --version

 

1.安裝vue-cli,-g表示全域性安裝,這樣你才可以直接在命令列使用該指令,否則不行

npm install -g @vue/cli

2.使用vue-cli初始化一個專案檔案

vue create hello-world

hello-world是你的檔名,自己定義,cli3.x版本和2.x版本初始化專案的命令不一樣,2.x版本的命令為

vue init <template-name> <project-name>
init:表示我要用vue-cli來初始化專案 <template-name>:表示模板名稱,vue-cli官方為我們提供了5種模板, 
webpack-一個全面的webpack+vue-loader的模板,功能包括熱載入,linting,檢測和CSS擴充套件。
webpack-simple-一個簡單webpack+vue-loader的模板,不包含其他功能,讓你快速的搭建vue的開發環境。
browserify-一個全面的Browserify+vueify 的模板,功能包括熱載入,linting,單元檢測。
browserify-simple-一個簡單Browserify+vueify的模板,不包含其他功能,讓你快速的搭建vue的開發環境。
simple-一個最簡單的單頁應用模板。 <project-name>:標識專案名稱,這個你可以根據自己的專案來起名字。

拉取 2.x 模板 (舊版本)

Vue CLI 3 和舊版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能,你可以全域性安裝一個橋接工具:

npm install -g @vue/cli-init
# `vue init` 的執行效果將會跟 `[email protected].x` 相同
vue init webpack my-project