vue3.0 项目的创建

485 阅读2分钟
创建项目

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件:

CLI@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)

CLI 服务@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供 如:servebuildinspect 命令)

CLI 插件:给Vue 项目提供可选功能的 npm 包 (如: Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等)

二、安装

1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步:

1 npm uninstall vue-cli -g //或者 yarn global remove vue-cli

三、使用

1、vue create 搭建新项目

(1)新建项目:

在weindow系统上,使用 powershell

如果没有配置保存过,则只有以下两个选项:

② default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包

③ Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包

手动选择需要添加的配置项:

? Check the features needed for your project: (Press to select, to toggle all, to invert selection)

( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试

选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的(方便遇到问题时百度),简介如下:

①是否使用history router:

② css预处理器

主要为css解决浏览器兼容、简化CSS代码 等问题

③ ESLint:

提供一个插件化的javascript代码检测工具,ESLint + Prettier //使用较多

④ 何时检测:

⑤ 单元测试 :

⑥ 如何存放配置 :

⑦ 是否保存本次配置(y:记录本次配置,然后需要你起个名; n:不记录本次配置):

⑧ 搭建完成:

创建完项目后,会发现新建的项目中没有 webpack.config.js 如果要配置 需要创建vue.config.js 来配置