Vue 工程创建环境依赖:
- 安装node: https://nodejs.org/zh-cn/download/ 直接到官网下载安装
- 安装淘宝镜像(安装依赖速度比较快):npm install -g cnpm --registry=http://registry.npm.taobao.org
- 安装vue: npm install vue -g (使用频率高,直接全局安装)
- 安装vue-cli: npm install -g @vue/cli (使用频率高,直接全局安装, vue -V查看cli版本)
cli3 命令行创建项目:
vue create
vue create project-name //文件名 不支持驼峰
提示你选择一个preset(预设),选择第三个自定义配置
③ Manually select features:自定义配置我们所需要的面向生产的项目,提供可选功能的 npm 包
- 依赖包说明:
❯◉ 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
- 是否保存当前预设,下次构建无需再次配置
- 输入该预设名称
输入名字回车个,项目构建成功工后提示:
进入项目后输入npm run serve运行,运行成功: