vue项目实战：实战技巧总结（上）

2024-04-16 75

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue项目实战：实战技巧总结

一、创建项目及配置

1.1 vue cli2 创建项目

vue init webpack project

npm install

npm run dev

1.2 vue cli3 创建项目

 vue create project

选择配置，看个人项目需求

TypeScript 支持使用 TypeScript 书写源码
 Progressive Web App (PWA) Support PWA 支持。
 Router 支持 vue-router 。
 Vuex 支持 vuex 。
 CSS Pre-processors 支持 CSS 预处理器。
 Linter / Formatter 支持代码风格检查和格式化。
 Unit Testing 支持单元测试。
 E2E Testing 支持 E2E 测试。

进入到项目根目录

 cd  project

启动项目

 npm run serve

二、安装 element-UI

npm i element-ui -S

2.1main.js 引入

2.1.1 全局引入

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)

2.1.2 按需引入

首先，安装 babel-plugin-component

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", {
      "modules": false
    }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

或写为

- Vue.use(Button)
- Vue.use(Select)

三、安装 vuex

npm i vuex -s

3.1 /src/store 下面的 index.js 中

import Vue from 'vue'
import Vuex from 'vuex'

//挂载 Vuex
Vue.use(Vuex)

//创建 VueX 对象
const store = new Vuex.Store({
state:{name: 'helloVueX',
},
mutations:{},
actions:{},
modules:{}
})

export default store

3.2 main.js 引入

将 store 挂载到当前项目的 Vue 实例当中去

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
el: '#app',
router,
store, //store:store 和 router 一样，将我们创建的 Vuex 实例挂载到这个 vue 实例中
render: h => h(App)
})

3.3 在组件中使用 Vuex

<template>
    <div id='app'>
      name:
      <h1>{{ $store.state.name }}</h1>
    </div>
</template>

methods:{
  add(){
      console.log(this.\$store.state.name)
    }
},

更具体的学习文档参考我的网站:
学习文档

四、配置scss环境

4.1.首先安装依赖

npm install node-sass sass-loader --save-dev

4.2.找到 build 中 webpack.base.conf.js,在 rules 中添加 scss 规则

{
  test: /\.scss\$/,
  loaders: ['style', 'css', 'sass']
}

4.3.在 vue 文件中使用

<style lang='scss'>
  
</style>

4.4 在 vue 项目全局中引入 scss

1.全局引用时需要安装 sass-resources-loader

npm install sass-resources-loader --save-dev

2.修改 build 中的 utils.js

将scss: generateLoaders('sass')

修改为

scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    //你自己的 scss 全局文件的路径
    resources: path.resolve(\_\ _dirname, '../src/style/common.scss')
  }
})

如果上面的不能正常编译

//配置 sass 编译路径

function generateSassResourceLoader() {
  let loaders = [
    cssLoader,
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
        resources: path.resolve(__dirname, '../src/style/common.scss')
      }
    }
  ];
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    });
  } else {
    return ['vue-style-loader'].concat(loaders);
  }
}

在 cssLoaders 里面引入

sass:generateSassResourceLoader(),//新加的
scss:generateSassResourceLoader(),//新加的

4.5 引入全局的 sass

npm install --s node-sass sass-loader

1.首先你需要

npm install --s sass-resources-loader

2.在 build 目录下找到 utils.js 文件

Module build failed: TypeError: this.getResolve is not a function at Object.loader

安装 node-sass 运行报错
vue 安装 node-sass 编译报错
安装node-scss报错
安装 node-scss 报错

在搭建 vue 脚手架或者是在 vue 项目中，想使用 sass 的功能，

npm install node-sass --save-dev //安装 node-sass
npm install sass-loader --save-dev //安装 sass-loader
npm install style-loader --save-dev //安装 style-loader

这是因为当前 sass 的版本太高，webpack 编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到 package.json 文件，里面的 "sass-loader"的版本更换掉就行了。

将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

也可以先卸载当前版本，然后安装指定的版本

卸载当前版本

npm uninstall sass-loader

安装

npm install sass-loader@7.3.1 --save-dev

五、配置less环境

安装 less 和 less-loader

npm install less less-loader --save

修改 webpack.base.config.js 文件，配置 loader 加载依赖，让其支持外部的 less,在原来的代码上添加

// 此种方法在控制台中标签样式显示的是style标签样式
{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
}

// 可以在控制台中看到当前标签样式来自于哪个less文件
{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
  options: {
    sourceMap: true
  }
}

在 vue 文件中的 style 标签中添加 lang="less"即可在标签中使用 less，或者外部引入 less

参考文档

六、引入font-awesome

npm install font-awesome --save

然后在 main.js 引入 font-awesome/css/font-awesome.min.css 即可。

7、vue 配置网站的 ico

7.1方式一：

<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />

7.2 方式二

webpack.dev.conf.js
new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    favicon: 'favicon.ico', // 新增
    inject: true
  }),

  webpack.prod.conf.js
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  favicon: 'favicon.ico' // 新增
}),

八、引入自定义公共样式

在 router/index.js 里面引入公共样式

import 'bootstrap/dist/css/bootstrap.css' //引入 bootstrap
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '@/common/common.css'
import '@/common/index.css'

九、路由按需加载

const port = () => import('@/pages/port') //入口页面、

const router = new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'port',
      component: resolve => require.ensure([], () => resolve(require('@/pages/port')), 'port'),
    }]
})