安装步骤:
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
>(*) 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