《vue3项目开发实战》之 vue cli创建项目

vue3项目框架搭建主要有3种方法。1.vue@next源码项目  2.vue cli脚手架  3.基于vite创建

一、使用vue-cli 创建项目

 △：vue cli版本需要升级到4.x；node.js版本10.0.0以上

npm install -g @vue/cli  #全局安装vue cli
vue -V  #查看vue版本
#显示 @vue/cli 4.5.15

# npx vue -V  非全局安装vue cli 请使用npx命令



vue create project-name  #创建项目

vue cli 命令行创建项目：

vue create vue3-test  # vue3-test是项目名

选择配置方式 （上下键移动，enter键选择）

Default  #默认模板

Manually select features  #手动选择

 插件配置 （上下键移动，空格键选择，enter键下一页）

• Babel： Babel编译
• TypeScript：TypeScript支持
• Progressive Web App (PWA) Support： PWA支持
• Router： Vue-router路由
• Vuex： Vue状态管理
• CSS Pre-processors： CSS预编译器（包括：SCSS/Sass、Less、Stylus）
• Linter / Formatter： 代码检测和格式化
• Unit Testing： 单元测试
• E2E Testing： 端到端测试

vue版本选择，选3.x （上下键移动，enter键选择）

是否使用Class风格装饰器？  yes

typeScript检测？ yes

路由使用历史模式？ no   [路由历史：项目链接上不会出现#]

css语言选择？ 

 eslint检查，选择 只进行报错提醒  ESLint with error prevention only

 eslint 保存时检查

 配置保存到独立文件

是否保存为模板？（保存为模板，需要输入模板名称；下次创建项目时直接选择模板生成项目）

 等待生成项目

 项目启动

cd vue3-test
npm run serve

 

 访问项目

vue UI创建（命令行看不懂的，可以使用UI界面创建项目）

执行 vue ui，打开8000端口网页。

创建项目，选择模板或手动配置

 选择项目功能/插件

 class风格，css,eslint，项目是否保存为模板等配置

生成项目后，和cli一样启动访问

附录：

vue-cli 3.0安装和使用_David-CSDN博客_vue-cli3.0安装   命令安装详细说明

官网：