VUE3之使用脚手架

vue-cli

安装vue-cli的脚手架：

npm install @vue/cli -g

通过脚手架创建一个项目：

vue create 09_vue_cli_demo

vite

安装vite：

npm install vite -D

对当前项目使用vite：

npx vite

使用vite可以快速的将我们的代码进行编译打包，例如缺省引用的文件后缀名和解析引用的包。

当引用less文件时，仍然需要安装less：

npm install less -D

但是一旦安装了less之后，不需要其他的插件，vite就能自动帮助我们编译less文件。

使用postcss时，除了需要安装postcss：

npm install postcss -D

还需要编写postcss.config.js：

module.exports={
    plugins:[
        require("postcss-preset-env")
    ]
}

之后就能使用postcss了。

vite对ts文件能够直接支持，但是对于.vue文件，需要安装插件:

npm install @vitejs/plugin-vue -D

并对vite进行配置vite.config.js：

const vue = require("@vitejs/plugin-vue");

module.exports = {
    plugins: [
        vue()
    ]
}

还需要安装vue/compiler-sfc：

 npm install @vue/compiler-sfc -D 

这样就可以对vue文件进行支持。

使用vite对项目进行打包：

npx vite build

打包的结果产生于dist文件夹

预览打包的结果：

npx vite preview

在package.js中配置脚本：

  "scripts": {
    "serve": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

使用vite脚手架：

npm install @vitejs/create-app -g

使用脚手架创建一个项目：

create-app 11_vite_cli_demo

package.json中的脚本：

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  },