Vue

VUE3之使用脚手架

vue-cli

安装vue-cli的脚手架:

npm install @vue/cli -g

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

vue create 09_vue_cli_demo

image 13

vite

安装vite:

npm install vite -D

对当前项目使用vite:

npx vite

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

image 14

当引用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
image 15

package.json中的脚本:

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

发表评论