Vuecli
在cmd命令行中下载VUECLI
npm install @vue/cli -g
进入文件夹中创建项目
learn-webpack> vue create vuecli_demo
下图是vuecli创建过程中的配置信息
项目的目录结构
vite
安装vite
npm install vite -D
通过命令可以出现一个服务端，项目结构和命令如下
npx vite
vite默认对ts代码是支持的，对于使用less，只需要执行
npm install less -D
不需要额外配置，即可使用
vite对vue支持
- vue3单文件支持：@vitejs/plugin-vue
- vue3 jsx支持: @vitejs/plugin-vue-jsx
npm install @vitejs/plugin-vue -D
//也需要安装sfc支持的插件
npm install @vue/compiler-sfc -D
在根目录下创建vite.config.js文件
const vue = require("@vitejs/plugin-vue");
module.exports = {
plugins: [
vue()
]
}
在node_module下有个.vite文件夹，里面预打包了许多支持的插件，这也是vite速度快的原因之一
vite打包
npx vite build
npx vite preview
可以对打包的文件在服务器上预览效果
一般会在package.json中写脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "vite build",
"serve": "vite",
"preview": "vite preview"
},
此时执行
npm run serve...
vite脚手架
npm install @vitejs/create-app -g
使用脚手架创建项目
