vue cli 脚手架安装及创建项目

最新推荐文章于 2024-08-06 19:05:22 发布

摸鱼的码农族

最新推荐文章于 2024-08-06 19:05:22 发布

阅读量398

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_43289353/article/details/115208745

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

windows系统

1 安装node.js

https://nodejs.org/en/
直接在node官网下载安装。

2 安装 vue-cli

npm install webpack -g

安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功 (注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 )。

npm install webpack webpack-cli -g

如果出现类似以下内容错误：
webpack安装错误
解决办法：以管理员身份运行powershell，然后输入：set-ExecutionPolicy RemoteSigned 接着再输入Y按回车就可以了

set-ExecutionPolicy RemoteSigned

解决办法

3 全局安装vue-cli

npm install -g vue-cli

4 安装完成

安装完成后，检验是否安装成功，输入 vue-V (注意：这里是大写的 “V”)，如果出现版本号，则说明安装成功。

vue-V

打开 node 的安装目录，也可以看到我们全局安装的 vue-cli。

5 用 vue-cli 来构建项目

首先，在需要的位置新建一个文件夹作为项目的存放地，然后cd到目录下，输入命令，创建项目。

vue cli2的新建命令

vue init webpack [项目名称]

vue cli3的新建命令

vue create [项目名称]

如果 cli3命令出现以下内容说明 cli版本太低按要求升级cli版本

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
npm uninstall -g vue-cli
npm install -g @vue/cli

6A cli2创建项目后的交互

等待模板下载成功后，会有一个交互式的选项让你选择

# 项目名称:直接回车（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。
? Project name [项目名称] 

[# 项目描述,随便写] 
? Project description (A Vue.js project) [项目描述] 

# 作者名称
? Author [作者名称]

? Vue build # 我选择的运行加编译时 Runtime + Compiler: recommended for most users
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

# 是否需要 vue-router，路由肯定要的
? Install vue-router? (Y/n) [y] 

# 是否使用 ESLint 作为代码规范.
? Use ESLint to lint your code? (Y/n)[y] 

# ESlint预设   一样的ESlint 相关
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard) #标准
  Airbnb (https://github.com/airbnb/javascript) #Airbnb公司的
  none (configure it yourself) #自定义的

# 是否安装单元测试
? Set up unit tests (Y/n)[y]

# 测试模块 按需选择
? Pick a test runner (Use arrow keys)
> Jest
  Karma and Mocha
  none (configure it yourself)
  
#是否安装e2e测试 按需选择
? Setup e2e tests with Nightwatch? (Y/n)[y]

# 包管理器，我选的NPM
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

6B cli3以上创建项目后的交互

如果弹出是否使用阿里源

# 使用https://registry.npm.taobao.org更快的安装？  我选yes
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)[Y]

我这里的版本是 Vue CLI v4.5.12

# 选择预设  我这里选手动
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint) #vue2 + babel + eslint基础配置
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) #vue3预览版 + babel + eslint基础配置
> Manually select features # 自定义手动选择功能

#手动下的配置  上下选择 空格选中或取消
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version  #选择Vue版本
 (*) Babel  #将es6 语法转换成兼容的 js
 ( ) TypeScript  #支持使用 TypeScript 语法来编写代码
 ( ) Progressive Web App (PWA) Support  #PWA 支持
 ( ) Router  #vue 路由配置插件
 ( ) Vuex  #vuex
 ( ) CSS Pre-processors  #css 预处理
 (*) Linter / Formatter  #代码风格检查和格式化
 ( ) Unit Testing  #单元测试
 ( ) E2E Testing  #E2E 测试

# 选中vue版本  我选2.x
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

# 路由模式选中 我用的是哈希值 所有这里选n
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) [n]

# css 预处理器  我选中的是 less
? 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

# 选择 编码规则
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

# 选择代码规则检测方式  一般 选保存就检测 Lint on save
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

# Babel, ESLint 配置的存放位置，一般选择在专用的配置文件中
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files   #在专用的配置文件中
  In package.json    #在package.json

#是否保存配置 按需选中，保存后下次构建项目的时候就可以直用这次的配置构建项目
? Save this as a preset for future projects? (y/N)