Vue 3.x(Vue CLI 5.x)环境构建完整版Docker TypeScript纱线路由器


Vue 3环境设置过程

感谢您阅读许多文章。
自Vue 3发布以来已经过了大约两个月，但
这次，我想介绍一下公司暂时采用的Vue 3的环境构建。

欢迎条件

  • Docker环境已构建。
  • 我之前已经建立了Vue(2.x)环境。
  • 目前，我想用TypeScript触摸Vue3！
  • 尽管它是一个完整的版本，但它只是一个环境，因此，如果满足要构建的环境的条件，请使用它。

创建一个项目

创建您自己的项目。
我给你留下名字。 (如果不能确定，可以使用new-vue3-app等。)

直接在项目

下创建docker-compose.yml文件

1
2
3
4
5
6
7
8
9
10
11
version: "2.4"

services:
  node:
    image: node:latest
    ports:
      - 8080:8080
    volumes:
      - .:/srv:cached
    working_dir: /srv
    command: yarn serve

在项目

中执行以下命令

Vue CLI安装

1
docker-compose run --rm node yarn add @vue/cli

Vue CLI版本检查

1
2
vue -V
=> @vue/cli 5.9 (2020/11/24)

应用程序初始化

1
2
docker-compose run --rm node ./node_modules/.bin/vue create .
// 最後の . はカレントディレクトリを指すのでお忘れなく！
1
2
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) Y
1
? Generate project in current directory? (Y/n) Y

选择如何创建项目

1
2
3
4
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
? Manually select features

选择要安装在项目中的库

1
2
3
4
5
6
7
8
9
10
11
12
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ? Choose Vue version
 ? Babel
 ? TypeScript
 ? Progressive Web App (PWA) Support
 ? Router
 ? Vuex
?? CSS Pre-processors
 ? Linter / Formatter
 ? Unit Testing
 ? E2E Testing

重要：选择版本3。选择x

1
2
3
? Choose a version of Vue.js that you want to start the project with
  2.x
? 3.x (Preview)

选择类样式或对象样式(基本上没有对象样式就可以了)

1
? Use class-style component syntax? (y/N) N

选择对自动检测的polyfill使用Babel和TypeScript

1
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y

设置是否使用Vue路由器

的历史记录模式

1
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

CSS预处理器

的选择

1
2
3
4
5
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
? Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

选择ESLint预设

1
2
3
4
5
6
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
? ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

选择ESLint

的执行时间

1
2
3
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
?? Lint on save
 ? Lint and fix on commit

选择库(Babel或ESLint)配置文件的位置

1
2
3
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
? In dedicated config files
  In package.json

注册或设置为可在下一个和后续创建项目中使用的预设

1
? Save this as a preset for future projects? (y/N) N

选择纱线或NPM

1
2
3
? Pick the package manager to use when installing dependencies: (Use arrow keys)
? Use Yarn
  Use NPM

完成记录

1
2
3
4
5
6
7
8
9
10
11
12
13
success Saved lockfile.
Done in 80.73s.
?  Running completion hooks...

??  Generating README.md...

??  Successfully created project srv.
??  Get started with the following commands:

 $ yarn serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.

设置服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
yarn serve
yarn run v1.22.4
warning ../../../package.json: No license field
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2932ms                                                                        21:55:12


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

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

No issues found.

施工完成。
享受新的Vue3。
感谢你的努力工作！