Vue-cli3安装+创建项目

文章目录
[隐藏]

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
375 人浏览过

发表评论

邮箱地址不会被公开。 必填项已用*标注