怎样创建一个 Vue CLI 项目

Lasted 2020-03-08 10:29:48

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

1. 安装 VUE 包

可以使用下列任一命令安装 VUE 包:

npm install -g @vue/cli
或者
yarn global add @vue/cli

2. 创建一个项目

运行以下命令来创建一个新项目:

vue create hello-world
Vue CLI v4.2.3
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。 直接回车按默认值设置。

Vue CLI v4.2.3
✨  Creating project in /vuecli/hello-world.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.17.3
info No lockfile found.
[1/4] 🔍  Resolving packages...

success Saved lockfile.
✨  Done in 62.11s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 22.46s.
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd hello-world
 $ yarn serve

3. 启动项目

cd hello-world
yarn serve
yarn run v1.17.3
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 3033ms                               10:27:09 AM

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

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