前言

• nodjs v14.16.1 (在Windows系统安装Nodejs、在Linux系统安装Nodejs)
• @vue/cli 5.0.4 （安装新版本vue-cli：@vue/cli）

创建hello-world

创建项目

cmd> vue create hello-world
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes


Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.4
✨  Creating project in D:\sde\vue-workspace\hello-world.
⚙️  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install D:\sde\vue-workspace\hello-world\node_modules\yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation

> core-js@3.21.1 postinstall D:\sde\vue-workspace\hello-world\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

added 859 packages from 460 contributors in 28.23s

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

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

added 96 packages from 96 contributors in 9.731s

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

⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd hello-world
 $ npm run serve

运行项目

cmd> npm run serve

> hello-world@0.1.0 serve D:\sde\vue-workspace\hello-world
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 8448ms                                                                      上午10:02:22

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.1.102:8081/

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

命令行创建项目

1. 输入命令：

cmd> vue create hello-world

2. 选取一个 preset。使用上下箭头按键选择preset。上下箭头按键移动>，按下回车键进入下一步。
   

   默认设置适合快速创建新项目，而手动设置可以根据项目需求灵活项目特性。此处选择手动设置（Manually select features），以便添加Router特性。

3. 添加Router特性。空格按键选择/取消选择。
   

4. 选择vue版本。选择vue3.x。
   

5. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)（router是否使用历史模式？默认值Y，推荐N。参考这里。）
   

6. Where do you prefer placing config for Babel, ESLint, etc.?（你想把Babel…的配置文件放在那里？使用单独的配置文件/放到package.json里）
   

7. Save this as a preset for future projects? (y/N)（是否将以上的配置保存下来，作为以后创建项目的默认配置？默认N）
   

8. 完成
   

图形化界面创建项目

通过 vue ui 命令，可以在图形化界面中创建和管理项目。

1. 启动图形化界面。

cmd> vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

2. 点击“创建”按钮开始创建项目。首先，选择项目创建完成后保存的目录。选好目录后，点击“在此创建新项目”。
   

3. 输入文件夹名称，然后点击“下一步”。
   

4. 选择一套预设：手动配置项目
   

5. 添加功能
   

6. 配置vue版本和router是否启用history模式。点击“创建项目”。
   

7. 保存为新的预设。点击“创建项目，不保存预设”。
   

8. 创建成功后，进入该项目的项目仪表盘。
   

参考

https://vuejs.org/