vue配置:创建项目配置说明

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(预设),选择第三个自定义配置
在这里插入图片描述

③ 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运行,运行成功:
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百事可爱-后悔下凡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值