1. Installation vue-cli 3.0
|
1
2
3
|
npm install -g @vue/cli
# or
yarn global add @vue/cli
|
After a successful installation view version: vue -V (uppercase V)
2. change command
|
1
|
vue create --help
|
usage:create [options] <app-name>
Create a support by `vue-cli-service` new projects
Options:
-p, --preset <presetName> ignore the prompt and use the saved or remote preset options
-d, --default ignore the prompt and use the default preset options
-i, --inlinePreset <json> prompt ignored and using inline JSON string preset options
-m, --packageManager <command> npm specified client installation dependent
-r, --registry <url> npm Registry specified during installation dependent (only for npm client)
-g, - Git [message] forced / skip git initialized and specifies the initialization optional information submitted
-n, --no-git git skip initialization
-f, --force overwrite destination directory possible configuration
-c, --clone use git clone obtain remote preset options
-x, --proxy create a project using the specified proxy
omitted default novice assembly instructions when -b, --bare create a project
- h, --help output help information use
3. Create a project
Go to the specified directory to create a project (project-name: Project Name)
|
1
|
vue create project-name
|
my-default is a good template I had saved;
default is the default configuration
Manually select features a custom configuration
4. Select the configuration (custom configuration)
5. Select the css pre-compiled, I chose less
|
1
2
3
4
5
6
|
Please pick a preset: Manually select features
Check the features needed
for
your project: Router, Vuex, CSS Pre-processors, Linter, Unit
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by
default
):
SCSS/SASS
> LESS
Stylus
|
6. syntax detection tool, I chose ESLint + Standard config
|
1
2
3
4
5
6
7
8
|
Please pick a preset: Manually select features
Check the features needed
for
your project: Router, Vuex, CSS Pre-processors, Linter, Unit
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by
default
): Stylus
Pick a linter / formatter config: (Use arrow keys)
ESLint
with
error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
|
7. Select syntax checking mode, here I choose to save it to detect
|
1
2
3
4
5
6
7
|
Please pick a preset: Manually select features
Check the features needed
for
your project: Router, Vuex, CSS Pre-processors, Linter, Unit
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by
default
): Stylus
Pick a linter / formatter config: Prettier
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save
// 保存就检测
( ) Lint and fix on commit
// fix和commit时候检查
|
8. Next will ask you to babel, postcss, eslint which put these profiles, pick here, I choose in a separate folder
|
1
2
3
4
5
6
7
8
9
|
Please pick a preset: Manually select features
Check the features needed
for
your project: Router, Vuex, CSS Pre-processors, Linter, Unit
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by
default
): Stylus
Pick a linter / formatter config: Prettier
Pick additional lint features: Lint on save
Pick a unit testing solution: Jest
Where
do
you prefer placing config
for
Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
// 独立文件放置
In package.json
// 放package.json里
|
9. Type N does not record, if you type Y need to enter the name of preservation, as I saw the first step to save the name of my-default
|
1
2
3
4
5
6
7
8
|
Please pick a preset: Manually select features
Check the features needed
for
your project: Router, Vuex, CSS Pre-processors, Linter, Unit
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by
default
): Stylus
Pick a linter / formatter config: Prettier
Pick additional lint features: Lint on save
Pick a unit testing solution: Jest
Where
do
you prefer placing config
for
Babel, PostCSS, ESLint, etc.? In dedicated config files
Save
this
as a preset
for
future projects? (Y/n)
// 是否记录一下以便下次继续使用这套配置。
|
10. After determining, dependent wait for the download module
11. After the project is created
|
1
2
|
cd project-name
// 进入项目根目录
run serve
// 运行项目
|
12. browser to open http: // localhost: 8080
to sum up
The above is the process vue-cli3.0 scaffolding small series to introduce the project to build Hi, we want to help, if you have any questions please give me a message, Xiao Bian will promptly reply to everyone. In this I am also very grateful for the support of the home-site scripting!