Vue-Cli3.0创建项目,以及与Vue-Cli2.0的区别
1. 安装
安装Vue-Cli3.0命令发生一些变化
npm安装Vue-Cli3.0
$ cnpm install -g @vue/cli
而之前Vue-Cli2.0安装命令是这样
$ cnpm install -g vue-cli
安装完成后查看版本信息
$ vue -V
2.项目创建
Vue-Cli2.0创建项目命令
$ vue init webpack “项目名称”
创建步骤
Vue-Cli3.0创建项目命令
可参考:参考文章
$ vue create “项目名称”
**default: 默认项目配置
**Manually select features: 手动选择功能
**Babel:指转译成浏览器可识别的语言,可以让你的项目支持更新的语法,如es6\es7等
**TypeScript:新增的选项卡
**Progressive Web App (PWA) Support:指模拟原生app
**Router:路由管理
**Vuex:vuex管理模式
**CSS Pre-processors:css预处理语言
**Linter / Formatter:代码规范
**Unit Testing:组件单元测试
**E2E Testing:端对端测试,模拟用户真实场景
提示是否使用历史路由: 这种模式充分利用history pushState API 来完成URL跳转而无须重新加载页面;然后是选择css预处理语言
选择ESLint代码规范
ESLint with error prevention only: 只进行报错提醒;
ESLint + Airbnb conf: 不严谨模式;
ESLint + Standard config: 正常模式;
ESLint + Prettier: 严格模式
代码检查方式,何时对代码进行检测
Lint on save: 报错时检测
Lint and fix on commit(requires Git): 整理并固定提交时
单元测试解决方案:
选择Babel PostCss ESlint等配置文件存放位置
In dedicated config files: 保存在配置文件中
In package.json: 保存在package.json中
是否在以后的项目中使用以上配置
完成配置后创建项目并开始下载依赖,我们只要耐心等待进度条完成,这样我们就把Vue 项目创建好并完成了初始化
3.项目运行
vue-cli2.0的运行命令
npm run dev
vue-cli3.0的运行命令
$ npm run serve
- vue安装(vue-cli2.0脚手架安装)与创建项目以及打包部署
- vue项目中vscode安装eslint插件和错误自动修复(vue-cli2.0创建的项目)
- Vue-cli 3.0教程(2)——创建项目
- 使用Vue-cli3.0创建的项目 如何发布npm包
- vue-cli3.0创建新项目
- 卸载vue2.0 到vue_cli3.0的安装,创建项目。
- 从零开始安装node.js以及vue-cli4.0创建项目
- vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
- vue-cli2.0转3.0之项目搭建的详细步骤
- Vue-cli创建vue项目以及配置文件梳理
- 使用vue-cli 创建vue2.x项目中使用vue-router 与之前的区别
- (vue2.0 案例3.0) 在vue-cli 项目中 需要知道常见的配置 防止入坑
- vue-cli 3.0 安装和创建项目教程
- vue-cli3.0脚手架前端项目创建及解决Axios跨域
- vue-cli3.0的项目创建
- Vue-cli创建vue项目以及配置文件梳理
- Vue-cli3.0及以上版本创建项目步骤
- vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table,treeTable
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue-cli 两种创建项目的方法