创建vue3项目
本文主要介绍在已经安装配置好nodejs的情况下,利用vuecli创建vue项目,步骤如下:
一、利用vuecli创建vue项目
1、全局安装脚手架vuecli3
(1)全局安装脚手架
(2) 检测vue版本
2、创建vue项目
以搭建一个项目名称为vue_blog_web为例:
如果项目名称在该目录下已经创建,则会出现以下选项:
其中overwrite是覆盖已存在的文件夹;merge是合并两个文件夹;cancel是取消操作。
点击确认后,进入以下界面:
(1)选择Manually select features
x
其中default是默认创建,manually select features是手动选择创建,即按需配置vue项目。
(2)选择项目特性(空格是选中,上下是选择)
其中:
Babel:是转码器,用于兼容低版本浏览器,建议选上。
TypeScript:是TS语法。
Progressive Web App (PWA) Support:渐进式web应用程序。(不知道能干嘛,求大佬解答)
Router:路由vue-router,建议选上。
Vuex:用于管理vuex状态,建议选上。
CSS Pre-processors:css预处理器,建议选上。
Linter / Formatter:格式校正,用于严格规范自身的代码格式,建议选上。
Unit Testing:单元测试。
E2E Testing:E2E测试。
(3)选择vue.js版本
(4)选择CSS预处理语言(此处我选择less)
(5)选择ESLint代码规范(此处我选择只进行报错提醒)
其中:
ESLint with error prevention only:只进行报错提醒。
ESLint + Airbnb config:不严谨模式。
ESLint + Standard config:正常模式。
ESLint + Prettier:严格模式
(6)选择何时进行代码检测(此处选择保存时检测)
第二个选项是修复提交时检测。
(7)选择 Babel、PostCSS、ESLint等配置文件的存放位置(此处选择单独保存在各自的配置文件中)
(8)配置完成后等待初始化。
二、vue create和vue init webpack的区别
1、vue create:是vue-cli3.x版本的初始方式,启动方式默认为npm run serve。其中模板是固定的。
2、vue init webpack:是vue-cli2.x版本的初始方式,启动方式默认为npm run dev。其中webpack是官方指定模板,还有electron-vue等其他模板。
3、与vue-cli3.x不同的是,vue-cli2.x还要安装多个扩展包(即安装vue-cli2.x前要安装webpack包),而vue-cli3.x则不需要。
更多推荐
所有评论(0)