vue-cli3.0 开发环境构建

4 篇文章 0 订阅

一. 若已全局安装vue-cli (1.x 或 2.x),需先卸载

npm uninstall vue-cli -g 

二. 全局安装 vue-cli3.0

npm install -g @vue/cli

三. node版本要求 Node >=8.9,可以使用 nvm 管理多个 Node 版本。
在这里插入图片描述

  1. 安装nvm https://github.com/coreybutler/nvm-windows/releases
  2. 安装node–> nvm install 版本号 window系统位数
    在这里插入图片描述
  3. 显示所有安装的版本 nvm ls
    在这里插入图片描述
  4. 切换node版本 nvm use 版本号
    在这里插入图片描述
    四.创建项目
vue create 项目名

1. 进入功能配置选择

 (1. default (babel, eslint) 默认预设配置 babel, eslint
 (2. Manually select features  手动选择配置

在这里插入图片描述
5. enter后,进入手动选择配置 ,有以下Installed CLI Plugins选项(注:空格单选,a全选,i反向全选)

(1. babel
(2. TypeScript  
(3. Progressive Web App (PWA) Support  支持渐进式网页应用程序
(4. Router 路由管理器
(5. Vuex 状态管理模式(构建一个中大型单页应用时)
(6. CSS Pre-processors css预处理
(7. Linter / Formatter 代码风格、格式校验
(8. Unit Testing 单元测试
(9. E2E Testing E2E(End To End)即端对端测试

在这里插入图片描述
6. enter后,Installed CLI Plugins配置细节
(1 TypeScript

是否使用class风格的组件语法:Use class-style component syntax?
是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?

(2. Router 路由管理器

路由使用历史模式:Use history mode for router? (Requires proper server setup for index fallback in production) 

(3. CSS Pre-processors css预处理

选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  
选项:
	Less
	Sass
	Stylus

(4. Linter / Formatter 代码风格、格式校验

选择Linter / Formatter类型:Pick a linter / formatter config:
选项:
	TSLint
	ESLint with error prevention only  仅错误预防
	ESLint + Airbnb config  Airbnb配置
	ESLint + Standard config 标准配置
	ESLint + Prettier
选择lint方式:Pick additional lint features
选项:
	Lint on save 保存时检查
    Lint and fix on commit 提交时检查

(5. Unit Testing 单元测试

选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
选项:
	Mocha + Chai  
    Jest 

(6. E2E Testing E2E(End To End)即端对端测试

选择E2E testing类型:Pick a E2E testing solution: (Use arrow keys)
选项:
	Cypress (Chrome only) 
    Nightwatch (Selenium-based)

(7. 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置

 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
 选项:
	In dedicated config files 在专用的配置文件中
    In package.json 在package.json

(8. 将此作为将来项目的预置吗?

 Save this as a preset for future projects?
 选项:
	In dedicated config files 在专用的配置文件中
    In package.json 在package.json

(9.保存预设为

Save preset as:

(10.回车后开始构建

五.项目启动

1.进入目录

cd ydc-vue3 

2.运行

npm run serve

3.运行地址

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.90:8080/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值