1.Vue Cli脚手架

1.Vue Cli的安装和使用

安装vue cli:

npm install @vue/cli -g

升级vue cli:

npm update @vue/cli -g

创建项目:

Vue create 项目名称

选择预设:

选择配置:

首先，使用npm 创建项目:

npm init

创建项目目录结构:

index.js:

安装vite:

npm install vite -D

通过npx使用vite:

npx vite

此时，vite在本地搭建一个服务

使用浏览器访问此端口:

完美！

vite 可以帮我们打包css，比如:

但当我们想要引入例如less文件时:

此时会报错:

此时需要安装less依赖:

npm install less -D

然后在使用 npx vite 运行就可以了

如果我们需要选择器对不同浏览器加上不同的前缀，使用postcss

npm install postcss -D
npm install postcss-preset-env -D

创建postcss.config.js,进行配置:

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

然后就可以看到postcss已经帮我们加上浏览器前缀了

项目中先安装vue

 npm install vue@next

按照项目的vue版本，安装插件

创建vite.config.js,进行配置:

const vue = require("@vitejs/plugin-vue")
module.exports = {
    plugins:[
        vue()
    ]
}

全局安装vite脚手架

npm install @vitejs/create-app -g

使用命令创建项目：

create-app 项目名

选择框架: