1.安装vue-cli
npm install -g @vue/cli
# 或
yarn global add @vue/cli
2.创建一个项目
vue create demo-vue3
# OR
vue ui
添加Typescript
vue add typescript
添加typescript后，项目编译报错
先移除vue-cli对typescript的依赖
yarn remove @vue/cli-plugin-typescript
yarn remove typescript
添加路由
npm install vue-router@4
添加vuex
yarn add vuex@next --save
添加sass
yarn add sass -d
yarn add sass-loader -d
//合并
yarn add -D sass-loader sass
在vue.config,js中把css的变量变成全局可使用
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/scss/theme.scss";`
},
scss: {
additionalData: `@import "@/assets/scss/theme.scss";`
}
}
}
不同的sass-loader版本对应的关键字：
sass-loader v8-中 :---- “ data ”
sass-loader v8中:---- “ prependData ”
sass-loader v10+中，---- “ additionalData ”
