如何搭建一个vue2项目(完整步骤)

45 阅读1分钟

一、安装 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 的文件,用来配置路由。例如:如下图

image.png

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> 组件来创建导航链接,

image.png

<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')

image.png

六、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缓存
      })
    ]
  }
}