vue-cli（2.x~3.x） 和 vite构建工具搭建vue项目区别研究

----------vue-cli脚手架----------

前言：随着vue的版本不断更新，vue-cli脚手架也不断更新，
vue-cli2.0~~vue-cli3.x构建项目不同的区别

再之前我已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，
需要先卸载它命令是： npm uninstall vue-cli -g
再安装vue cli3（@vue/cli），注意安装前需要注意对node版本的要求
【`Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。`】

不想vue2和vue3的共存，然后又想要同时兼容两个脚手架的项目，那么咱们采用全局安装
Vue cli3和继续使用Vue-cli2.x方案


Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 
被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以**全局安装一个桥接工具**：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project  // vue2.x完美创建项目
npm run dev // 运行ok

注：以下项目名称不能驼峰命名。

一：脚手架 vue-cli和webpack有关系

脚手架帮我们帮我们把 webpack 等相关的配置都处理好，我们只需要基于脚手架快速构建一个项目即可
(项目中一定包含webpack的相关配置)

二：用脚手架vue-cli2.x 搭建vue2.x起项目

1：脚手架安装【全局】

npm install -g vue-cli

vue -V //查看版本号，验证是否安装成功

2:创建项目

 vue init webpack cli-vue2.1  // 创建项目 cli-vue2.1

3：运行项目

cd vue-cli2.1 //进入项目的根目录
npm run dev //本地运行项目

三：用脚手架vue-cli3.x起 搭建vue2.x起项目

:安装vue cli3（@vue/cli），注意安装前需要注意对node版本的要求【Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。

1：脚手架安装【全局】

用npm安装 npm install @vue/cli -g 
或者用yarn安装 yarn global add @vue/cli

vue -V //查看版本号，验证是否安装成功

2：创建工程化项目

 vue create cli-vue2  // 创建cli-vue2项目  ，注意项目名称不能为驼峰

a：选择手动重新存在

选项说明：

• Choose VUe version 选择vue版本
• babel（babel-preset-vue-app）：babel-preset-env最新的ECMAScript功能、转换Vue JSX转换generator和async/await等
• TypeScript ：是否选择TS 语法； 默认不选是JavaScript语法
• Progressive Web App(PWA) supprot 是否支持 渐进式网页应用
• Router ：Vue官方的路由管理器
• Vuex ：Vue中实现公共状态管理的插件 (处理组件之间的信息通信)
• Css Pre-processors ：CSS 预处理器（SASS/LESS/Stylus）
• Linter / Formatter ：eslint 语法检测
• Unit Testing ：单元测试
• E2E Testing ：端到端测试

b:是否使用路由器的历史模式，选择Y；选择哪个CSS 预处理语言的配置规则，我用的是less根据自己需要选择

C:选择自动化代码格式化检测，我用的 vscode 选的 ESLint+Prettier

D:可以保持配置方便下次选择

E: 把配置信息放到哪个地方？

四：vue-cli3.x 创建 vue3.x

    前言：已经有安装vue-cli3.x起脚手架

1）：命令：

vue create demovue3.0

npm run serve
npm run build打包

2）：目录结构

3）：vue-cli3.x搭建的vue2.x和vue3.x目录区别

五： 项目目录

• src ：项目开发源文件

  • main.js ：打包编译的入口文件
  • App.vue ：项目页面的入口文件
  • components ：存放当前项目的公共组件
    • xxx.vue
  • assets ：一般存放项目中需要引入的静态资源文件
    • xxx.png
    • xxx.css

• public

  • index.html ：当前项目的主页面，我们最后把所有在src中写的内容，通过webpack、vue编译渲染，最后呈现在index.html中的#app容器中
  • xxx.xx ：有些时候我们的某些资源可能要单独在index.html就引用了，将它放在此文件夹下，但是开发时除了这样的资源，其余的都建议放在src文件夹中

开发模式下我们基于下面这个命令，启动一个本地服务，把基于webpack编译后的内容预览

$npm run serve 或者 $yarn serve

生产模式下，把写好的内容进行编译打包，最后部署到服务器上

$npm run build 或者 $yarn build

vue-cli的其他命令

$vue inspect 查看当前项目默认的webpack配置信息
$vue add [plugin] 在当前项目中安装插件

vue ui ：以图形化界面创建和管理项目

vue-cli的一点深入

创建项目后，默认的配置中已经把，例如：less/sass 等规则配好，如果我们的项目中需要使用less等，无需配置规则，只需要安装对应的模块和加载器即可

$yarn add less less-loader -D

<script>
    impoer './xxx/xxx.xx' //=>导入需要的模块
</script>

<style lang="less">
    ...../
</style>

修改默认的webpack配置

• 需要在根目录中创建 vue.config.js 文件，在这个文件中修改相关配置，下面代码就是修改webpack的相关配置

    module.exports = {
	//=>process.env.NODE_ENV：环境变量中存储的是开发环境还是生产环境
	publicPath: process.env.NODE_ENV === 'production' ? 'http://www.xxx.cn/' : '/',
	//=>outputDir
	//=>自定义目录名称，把生成的JS/CSS/图片等静态资源放置到这个目录中
	assetsDir: 'assets',
	//=>关闭生产环境下的资源映射（生产环境下不在创建xxx.js.map文件）
	productionSourceMap: false,
	//=>设置一些webpack配置项，用这些配置项和默认的配置项合并
	configureWebpack: {
		plugins: []
	},
	//=>直接去修改内置的webpack配置项
	chainWebpack: config => {
		//=>config:原始配置信息对象
		config.module
			.rule('images')
			.use('url-loader')
			.loader('url-loader')
			.tap(options => {
				options.limit = 200 * 1024;
				return options;
			});
	},
	//=>修改webpack-dev-server配置（尤其是跨域代理）
	devServer: {
		proxy: {
			//请求地址  /user/add
			//代理地址  http://api.xxx.cn/user/add
			"/": {
				changeOrigin: true,
				target: "http://api.xxx.cn/"
			}
		}
	},
	//=>多余1核cpu时：启动并行压缩
	parallel: require('os').cpus().length > 1
    }
    

六：packjson的 dependencies和devDependencies的区别

我们知道dependencies是依赖，附属的意思，而前缀dev是develop的简写，devDependencies是开发环境下的依赖，相对的，dependencies是生产环境下的依赖。

1.使用npm安装依赖时，–save和–save-dev 使用–save安装的依赖，会被写到dependencies区块里面去。 而使用–save-dev安装依赖，则会被写到devDependencies区块里面去 什么都不写，只是本地安装，并非全局。这时候会被写到dependencies区块里面去。

2.在package.json 文件中dependencies和devDependencies区块的区别 devDependencies 里面的依赖只用于开发环境，不用于生产环境。而 dependencies 依赖的包不仅开发环境能使用，生产环境也能使用。

而两种环境的的指定方式是通过配置文件中的NODE_ENV=developement或NODE_ENV=production来指定是开发还是生产环境的。

我们使用的一些构建工具例如glup、webpack这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入devDependencies

七：脚手架vue-cli2.x和 vue-cli3.x 搭建vue 项目区别总结

1:安装脚手架命令不一样

 npm install -g vue-cli    // vue-cli 2.x
 npm install -g @vue/cli  // vue-cli3.x起版本
 

2:创建项目的命令不一致

vue init webpack **   // vue-cli 2.x  版本

vue create******   // vue-cli 3.x 起版本 

3:目录结构不一致

    移除了配置文件目录，config 和 build 文件夹
    移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
    在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

4:启动命令变化

删除了vue list

启动项目  npm run run  // vue-cli2.x 起 
         npm run serve  // vue-cli3.x 起 

5:配置变化

参考链接： juejin.cn/post/684490…

------------vite------------------------------

一：vite 搭建vue3.x项目

1）命令：

npm init vite vite-vue3.x （创建vite-vue3.x项目）

cd vite-vue2.x (打开创建目录)
npm intall 
npm run dev 

二：vite2搭建vue2项目

• npm(Vite 需要Node版本 >= 12.0.0):

npm init vite@latest 项目名
复制代码

• yarn:

yarn create vite 项目名
复制代码

• 我使用的:yarn create vite vue2+vite

1.选择框架

• vite直接提供的vue模板使用的是vue3,所以要搭建vue2项目只能先选择原生框架然后自行安装vue
• 选择vanilla(原生js)

3.安装插件

• 由于vite只支持到vue3,所以要安装vue2需要插件来实现
• 进入项目文件夹,安装vite-plugin-vue2插件
• 使用 yarn：yarn add vite-plugin-vue2 -D
• 使用 npm：npm install vite-plugin-vue2 -D

4. 修改配置

• 创建配置文件vite.config.js

const { createVuePlugin } = require('vite-plugin-vue2')

module.exports = {
    plugins: [createVuePlugin( /*options*/ )],
}
复制代码

5.安装vue

• 使用yarn:yarn add vue vue-template-compiler
• 使用npm:npm i vue vue-template-compiler

6.修改文件

• 创建src文件夹,创建App.vue

template>
	<h1>This Is Vue 2 + Vite</h1>
</template>
复制代码

• 将main.js移动到src文件夹下

// main.js
import Vue from "vue";
import App from "./App.vue"

new Vue({
    el: "#app",
    render: (h) => h(App)
}).$mount();
复制代码

• 修改index.html中对main.js的引用路径

此时我们的项目目录为:

7.启动项目

• yarn dev/npm run dev

功能	Vue CLI 2（Vue 2）	Vue CLI 3/4/5（Vue 2）	Vite（Vue 3）
创建项目	vue init webpack my-project	vue create my-project	npm create vite@latest my-project
启动开发服务器	npm run dev	npm run serve	npm run dev
构建生产代码	npm run build	npm run build	npm run build
配置文件	build/ 和 config/ 目录	vue.config.js	vite.config.js
插件管理	手动安装和配置	vue add plugin-name	使用 Vite 插件
环境变量	config/dev.env.js 等	.env 文件	.env 文件
性能	较慢	较快	极快

• Vue CLI 2：适合维护旧项目或需要深度定制 Webpack 的场景。
• Vue CLI 3/4/5：适合构建 Vue 2 项目，配置更现代化。
• Vite：适合构建 Vue 3 项目，开发体验和性能最优。

文章分类

前端

文章标签

Vite

---

vite 搭建vue2.x 参考以下链接 juejin.cn/post/701250…