Vue - vue create、vue ui、vue init三種方式建立Vue項目

安裝@vue/cli

為

npm

安裝的包配置環境變量。

Vue - vue create、vue ui、vue init三種方式建立Vue項目

運作下面這條指令。

npm install -g @vue/cli

在CMD中運作

vue --version

指令，如果輸出了

@vue/cli

的版本，則說明

@vue/cli

安裝成功了。

C:\Users\Kaven>vue --version
@vue/cli 4.5.9

建立Vue項目 - vue create

通過下面這條指令可以檢視

vue create

指令的說明。

vue create -h

E:\workspace\WebStorm\blog\project>vue create -h
Usage: create [options] <app-name>

create a new project powered by vue-cli-service

Options:
  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
  -g, --git [message]             Force git initialization with initial commit message
  -n, --no-git                    Skip git initialization
  -f, --force                     Overwrite target directory if it exists
  --merge                         Merge target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy <proxyUrl>          Use specified proxy when creating project
  -b, --bare                      Scaffold project without beginner instructions
  --skipGetStarted                Skip displaying "Get started" instructions
  -h, --help                      output usage information

通過下面這條指令來建立Vue項目

project

。

vue create project

選擇Vue的版本。

建立Vue項目。

E:\workspace\WebStorm\blog\project>vue create project


Vue CLI v4.5.9
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v4.5.9
✨  Creating project in E:\workspace\WebStorm\blog\project\project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> [email protected] install E:\workspace\WebStorm\blog\project\project\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> [email protected] postinstall E:\workspace\WebStorm\blog\project\project\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> [email protected] postinstall E:\workspace\WebStorm\blog\project\project\node_modules\ejs
> node ./postinstall.js

added 1248 packages from 938 contributors in 33.831s

61 packages are looking for funding
  run `npm fund` for details

🚀  Invoking generators...
📦  Installing additional dependencies...

added 53 packages from 36 contributors in 6.473s

65 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project project.
👉  Get started with the following commands:

 $ cd project
 $ npm run serve

運作項目。

E:\workspace\WebStorm\blog\project>cd project

E:\workspace\WebStorm\blog\project\project>npm run serve

> [email protected] serve E:\workspace\WebStorm\blog\project\project
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1973ms                                                                      下午11:18:40


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.103:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

通路

http://localhost:8080/

得到如下圖所示頁面，說明Vue項目已經運作成功了。

建立Vue項目 - vue ui

vue ui

指令的說明。

E:\workspace\WebStorm\blog\project>vue ui -h
Usage: ui [options]

start and open the vue-cli ui

Options:
  -H, --host <host>  Host used for the UI server (default: localhost)
  -p, --port <port>  Port used for the UI server (by default search for available port)
  -D, --dev          Run in dev mode
  --quiet            Don't output starting messages
  --headless         Don't open browser on start and output port
  -h, --help         output usage information

通過下面這條指令來打開一個管理Vue項目的可視化頁面。

vue ui

E:\workspace\WebStorm\blog\project>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

出現如下圖所示頁面，可以管理現有的Vue項目、建立新的Vue項目、導入Vue項目。

選擇建立，點選在此建立新項目。

輸入項目名，選擇包管理器，預設初始化

git

倉庫，點選下一步。

選擇Vue版本，點選建立項目。

項目建立成功，得到如下圖所示頁面。

可以檢視項目的依賴。

還可以添加插件。

運作項目。

項目運作成功。

通路項目。

項目可以正常通路。

建立Vue項目 - vue init

先安裝

@vue/cli-init

。

E:\workspace\WebStorm\blog\project>npm i -g @vue/cli-init
...
+ @vue/[email protected]
added 251 packages from 206 contributors in 18.065s

vue init

指令的說明。

E:\workspace\WebStorm\blog\project>vue init -h
Usage: init [options] <template> <app-name>

generate a project from a remote template (legacy API, requires @vue/cli-init)

Options:
  -c, --clone  Use git clone when fetching remote template
  --offline    Use cached template
  -h, --help   output usage information

還可以通過下面這條指令來建立Vue項目，這裡的

webpack

參數是一種模闆（

template

），

project

參數就是項目名稱（

app-name

）。

vue init webpack project

E:\workspace\WebStorm\blog\project>vue init webpack project

? Project name project
? Project description A Vue.js project
? Author ITKaven <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "project".
   
# Installing project dependencies ...
added 1380 packages from 715 contributors in 31.707s

41 packages are looking for funding
  run `npm fund` for details

Running eslint --fix to comply with chosen preset rules...
# ========================


> [email protected] lint E:\workspace\WebStorm\blog\project\project
> eslint --ext .js,.vue src "--fix"


# Project initialization finished!
# ========================

To get started:

  cd project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

運作項目。

E:\workspace\WebStorm\blog\project>cd project

E:\workspace\WebStorm\blog\project\project>npm run dev

> [email protected] dev E:\workspace\WebStorm\blog\project\project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 26/31 modules 5 active ...torm\blog\project\project\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 2614ms                                                                      下午11:53:24

 I  Your application is running here: http://localhost:8080

通路

http://localhost:8080/

得到如下圖所示頁面，說明Vue項目已經運作成功了。

差別

vue create

vue creat

指令是

vue-cli3.x

提供建立Vue項目的方式，模闆是固定的，模闆選項可自由配置。

使用方式：

vue create [options] <app-name>

。

vue ui

vue ui

指令也是

vue-cli3.x

提供建立Vue項目的方式，可以通過操作可視化頁面來建立和管理Vue項目。

vue init

vue init

指令是

vue-cli2.x

提供建立Vue項目的方式，可以使用

github

上面的一些模闆來初始化項目。比如

webpack

就是官方推薦的标準模闆。

使用方式：

vue init [options] <template> <app-name>

。

Vue - vue create、vue ui、vue init三種方式建立Vue項目