文章目录
[隐藏]
1.安装CNPM源(taobao源:https://npm.taobao.org/)
npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\xwGame\AppData\Roaming\npm\cnpm -> C:\Users\xwGame\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.0
added 693 packages from 917 contributors in 67.795s
2.全局安装VUE-CLI3 (https://cli.vuejs.org/)
cnpm install -g @vue/cli
Downloading @vue/cli to C:\Users\xwGame\AppData\Roaming\npm\node_modules\@vue\cli_tmp
Copying C:\Users\xwGame\AppData\Roaming\npm\node_modules\@vue\cli_tmp\_@vue_cli@3.9.1@@vue\cli to C:\Users\xwGame\AppData\Roaming\npm\node_modules\@vue\cli
Installing @vue/cli's dependencies to C:\Users\xwGame\AppData\Roaming\npm\node_modules\@vue\cli/node_modules
[1/34] deepmerge@^3.2.0 installed at node_modules\_deepmerge@3.3.0@deepmerge
[2/34] commander@^2.20.0 installed at node_modules\_commander@2.20.0@commander
[3/34] @vue/cli-ui-addon-widgets@^3.9.1 installed at node_modules\_@vue_cli-ui-addon-widgets@3.9.1@@vue\cli-ui-addon-widgets
[4/34] didyoumean@^1.2.1 installed at node_modules\_didyoumean@1.2.1@didyoumean
[5/34] debug@^4.1.0 installed at node_modules\_debug@4.1.1@debug
[6/34] @vue/cli-ui-addon-webpack@^3.9.1 installed at node_modules\_@vue_cli-ui-addon-webpack@3.9.1@@vue\cli-ui-addon-webpack
[7/34] ejs@^2.6.1 installed at node_modules\_ejs@2.6.2@ejs
[8/34] envinfo@^7.1.0 installed at node_modules\_envinfo@7.3.1@envinfo
[9/34] chalk@^2.4.1 installed at node_modules\_chalk@2.4.2@chalk
...
3.查看VUE版本
vue --version
3.9.1
4.如果不想使用模板创建项目,VUE提供了VUE Service来快速创建原型,首先要先安装插件
cnpm install -g @vue/cli-service-global
vue serve语法:
Usage: serve [options] [entry]
serve a .js or .vue file in development mode with zero config
Options:
-o, --open 打开浏览器
-c, --copy 复制本地链接到粘贴板
-h, --help 输出使用信息
例子:创建HelloWorld.vue
<template>
<h1>Hello!</h1>
</template>
执行 vue serve xxx/HelloWorld.vue 就可以看到效果了。
vue build 语法:
Usage: build [options] [entry]
build a .js or .vue file in production mode with zero config
Options:
-t, --target <target> Build target (app | lib | wc | wc-async, default: app)
-n, --name <name> name for lib or web-component (default: entry filename)
-d, --dest <dir> output directory (default: dist)
-h, --help output usage information
vue build xxx/HelloWorld.vue
5.使用模板创建项目
vue create vue-test
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? Yes
(您与默认的yarn注册表的连接似乎很慢。
使用https://registry.npm.taobao.org加快安装速度?)
1. 选择模板
Vue CLI v3.9.1
? Please pick a preset: (Use arrow keys)
> default (babel, eslint) (选择默认模板)
Manually select features (手动选择属性)
2. 选择插件(空格选中,a键全选,i键反选)
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel (必选,转换ES6)
( ) TypeScript
( ) Progressive Web App (PWA) Support (渐进式应用程序)
(*) Router (路由管理)
(*) Vuex (状态管理器)
(*) CSS Pre-processors
(*) Linter / Formatter (代码格式化)
( ) Unit Testing (单元测试)
( ) E2E Testing (端对端测试)
3. 是否选择历史路由模式
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
使用路由的历史模式?(需要为生产中的索引回退设置正确的服务器)
4. 选择CSS扩展
? 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
5. 选择ESLint模式
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only (只检测错误)
ESLint + Airbnb config (Airbnb配置模板)
> ESLint + Standard config (标准模板)
ESLint + Prettier (Prettier)
6. Lint检测时机
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save (保存时检测)
( ) Lint and fix on commit (代码提交时检测)
7. Babel,Lint配置信息统一管理还是单独管理
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files (单独管理)
In package.json (统一管理)
7. 是否想把本次手动选择的设置用于未来项目
? Save this as a preset for future projects? (y/N)
8. 保存为
? Save preset as: default_preset
✨ Creating project in F:\web2\trunk\vue-demo\vue-test.
🗃 Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
...
...
🎉 Successfully created project vue-test.
👉 Get started with the following commands:
$ cd vue-test
$ npm run serve
6.使用GUI创建项目
vue ui