Vue 工程创建环境依赖:

  1. 安装node: https://nodejs.org/zh-cn/download/ 直接到官网下载安装
  2. 安装淘宝镜像(安装依赖速度比较快):npm install -g cnpm --registry=http://registry.npm.taobao.org
  3. 安装vue: npm install vue -g (使用频率高,直接全局安装)
  4. 安装vue-cli: npm install -g @vue/cli (使用频率高,直接全局安装, vue -V查看cli版本)

cli3 命令行创建项目:

vue create

vue create project-name //文件名 不支持驼峰

提示你选择一个preset(预设),选择第三个自定义配置

vue项目配置支持es6_Vue

③ Manually select features:自定义配置我们所需要的面向生产的项目,提供可选功能的 npm 包

vue项目配置支持es6_Babel_02

  • 依赖包说明:
❯◉ Choose Vue version    # 选择vue版本,不选择,默认安装`2.6.11`版本的vue
 ◉ Babel				 # 语法编译器,es6->es5
 ◯ TypeScript			 # 支持使用 TypeScript 书写源码
 ◯ Progressive Web App (PWA) Support  # PWA,模拟原生app,渐进式网络应用程序 
 ◯ Router				# 支持 vue-router
 ◯ Vuex					# 支持 vuex
 ◯ CSS Pre-processors   # 支持 CSS 预处理器。
 ◉ Linter / Formatter	# 支持代码风格检查和格式化。
 ◯ Unit Testing			# 组件单元测试
 ◯ E2E Testing			# 端对端测试,模拟用户真实场景

按你项目需要选择功能

  • 选择vue版本, 会提示让你选择2.x或者3.x,
  • 选择babel会提示:是否选择class风格的组件语法?
    即原本是:home = new Vue()创建vue实例
    使用装饰器后:class home extends Vue{}
  • 选择TypeScript会提示:否使用TypeScript和Babel的形式编译 JSX
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
  • router 提示:路由是否使用history模式?
    这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
  • CSS 预处理选项:Sass/ Less
  • eslint 提示: 选择语法检测规范
  • 选择 保存时检查 / 提交时检查
  • 选择测试方式:
  • e2e测试方式
  • 选择配置信息存放位置: 单独存放或者并入package.json
  • 是否保存当前预设,下次构建无需再次配置
  • 输入该预设名称

输入名字回车个,项目构建成功工后提示:

vue项目配置支持es6_Babel_03


进入项目后输入npm run serve运行,运行成功:

vue项目配置支持es6_CSS_04