vue-cli3+基本构建流程

安装步骤:

1,如本地未安装vue-cli3+,则需要先安装

# 安装命令

npm install -g @vue/cli

# OR

yarn global add @vue/cli

# 通过下面这个命令查看是否安装成功

vue --version

2,开始创建项目

# 使用vue-cli3+创建一个项目

vue create my-project

会出现以下选择步骤

Vue CLI v3.0.5

# 选择预设

? Please pick a preset:

  # 插件配置预设

  plugins-config (vue-router, vuex, sass, babel, typescript, eslint)

  # 基本配置预设

  base.config (vue-router, vuex, babel, typescript)

  # 默认预设

  default (babel, eslint)

  # 手动预设(自定义):此处我们选择手动

> Manually select features

# 选择你所需要的内置特性,上下键移动,空格选中

? Check the features needed for your project: (Press to select, to toggle all, to invert selection)

>(*) Babel //babel 代码转换

(*) TypeScript // ts支持

( ) Progressive Web App (PWA) Support // PWA支持

(*) Router // router支持

(*) Vuex // vuex支持

(*) CSS Pre-processors // css预处理

( ) Linter / Formatter // 代码风格检查和格式化

( ) Unit Testing // 支持单元测试

( ) E2E Testing // 支持E2E测试

# 是否使用class风格的写法,此处选择Y

? Use class-style component syntax? (Y/n)

# 是否用babel做转义,此处选择Y

? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)

# 是否为路由启用history模式,此处选择n,因为history模式需要后端支持

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

# 选择一个css预处理器(默认支持PostCSS、Autoprefixer和CSS模块),此处选择sass

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

> Sass/SCSS

  Less

  Stylus


# 选择以上配置(Babel, PostCSS, ESLint等)的保存位置,这里建议独立保存

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

  # 独立保存

> In dedicated config files

  # 保存至package.json

  In package.json


# 是否将本配置保存作为以后项目的预设? 这个保存会存在~/.vuerc 文件夹,方便以后复用。这里选择N

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

3,项目操作

# 进入项目目录

cd my-project

# 启动项目

npm run serve

# 项目打包

npm run build

# 单元测试

npm run test

你可能感兴趣的:(vue-cli3+基本构建流程)