一、安装 Vue CLI：
在命令行中运行以下命令来安装 Vue CLI
npm install -g @vue/cli
二、创建新项目：
vue create your-project-name
三、进入项目目录
cd project-name
四、启动开发服务器：
npm run serve
五、配置路由
1.安装 Vue Router：
npm install vue-router@2
2.创建路由文件
在项目的 src 目录下创建一个新的文件夹，命名为 router，在这个文件夹下创建一个名为 index.js 的文件，用来配置路由。例如：如下图
3.在“index.js”文件中配置路由
在 index.js 文件中导入 Vue 和 Vue Router，并创建一个新的路由实例。然后定义路由映射关系，即路径和组件的对应关系。(提前创建好两个组件home和other)
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash', // 使用 hash 模式
routes: [
{
path: '',
name: "home",
component: () => import('@/views/index/index'),
},
{
path: '/other',
name: "other",
component: () => import('@/views/other/index'),
}
]
});
export default router;
4.使用路由：
在你的 Vue 组件中使用路由。你可以在模板中使用 <router-link> 组件来创建导航链接，
<router-link to="/other">12122222</router-link>
5.挂载路由：
在应用的入口文件中（通常是 main.js），将路由实例挂载到应用中。例如：
import Vue from 'vue'
import App from './App.vue'
import router from "./router"
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
六、vue.config文件配置
1.配置代理：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
devServer: {
proxy: {
'/api': {
target: 'http://xxx.xxx', // 目标服务器地址
changeOrigin: true, // 是否改变源地址
pathRewrite: {
'^/api': '' // 重写路径
}
}
}
},
})
2.## 引用静态资源：
安装sass-loader sass。
npm install -D sass-loader sass
有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.sass` 这个文件
// 注意：在 sass-loader v8 中，这个选项名是 "prependData"
additionalData: `@import "~@/variables.sass"`
},
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `prependData` 选项的时候
// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
scss: {
additionalData: `@import "~@/variables.scss";`
},
}
}
}
2.## webpack打包优化,开启gizp压缩：
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。 安装compression-webpack-plugin，这里安装的是低版本的，高版本的使用cache会报错。指定版本6.1.2
npm install compression-webpack-plugin@6.1.2
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new CompressionPlugin({
test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式
filename: '[path][base].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8, // 压缩比例，小于 80% 的文件不会被压缩
deleteOriginalAssets: false,
cache: false,// 开发模式的时候不开启，生产模式的时候开启。此插件默认开启cache缓存
})
]
}
}
