新手练习-vue3项目搭建初始化配置

陈煜的博客

已于 2023-05-05 11:00:07 修改

阅读量159

点赞数

分类专栏： vue 文章标签： vue.js

于 2023-04-10 15:36:38 首次发布

本文链接：https://blog.csdn.net/qq_41709084/article/details/130061669

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了前端项目中的一些常见配置和技术集成，包括使用postcss-pxtorem进行rem适配，less预处理器的安装，vant组件库的引入及按需加载，阿里巴巴矢量库的使用，处理sockjs.js报错的方法，代码提交到远程仓库的步骤，vue-router的路由配置，axios的安装和使用，vuex状态管理的集成，以及VSCode的相关插件配置和全局事件总线mitt的引入。

摘要由CSDN通过智能技术生成

1、rem适配

安装

cnpm install postcss-pxtorem@5.1.1 amfe-flexible -S

文件配置

/ vue.config.js
module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ rootValue: 16 , propList: ['*']}),
        ],
      },
    },
  },
};

引入

// main.js
import 'amfe-flexible';

2、less 预处理器

安装

cnpm i less less-loader@7 -S

3、vant 组件库的引入

官网地址

vue3版本地址
https://vant-contrib.gitee.io/vant/#/zh-CN

安装

cnpm i vant@3.6.11 -S
cnpm i babel-plugin-import -S

引入

// main.js
import { Button } from 'vant';

const app = createApp(App);
app.use(Button);
app.mount("#app");

样式按需引入

// babel.config.js
plugins: [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true,
    },
    'vant',
  ],
],

使用

<van-button type="primary">主要按钮</van-button>

4、阿里巴巴矢量库引入

引入

// index.html
<script src="http://at.alicdn.com/t/font_2701887_5roykhspg1e.js"></script>

使用

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

5、报错

错误

sockjs.js:1609 GET http://192.168.0.120:8080/sockjs-node/info?t=164267043253

解决方案

cnpm install -g webpack webpack-cli webpack-dev-server

6、代码提交远程仓库

连接

git remote add origin https://gitee.com/chenyu/xdclass.git

将本地仓库push远程仓库

git pull origin master --allow-unrelated-histories

覆盖远程仓库

git push -f origin master

7、路由配置

安装

cnpm i vue-router@4 -S

新建路由配置文件

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home', 
    },
    {
      path: '/home',
      component: () => import('../pages/MyHome'),
    },
    {
      path: '/cart',
      component: () => import('../pages/MyCart'),
    },
    {
      path: '/me',
      component: () => import('../pages/MyMessage'),
    },
    {
      path: '/order',
      component: () => import('../pages/MyOrder'),
    },
  ],
});

export default router;

引入

// main.js
import router from './router/index';

const app = createApp(App);
app.use(router);
app.mount('#app');

8、axios安装

安装

cnpm i axios -S

使用

// api.js;
import axios from './request';
export const getHomeData = () => axios.get('/mock/home.json');

9、vuex安装

安装

cnpm install vuex@4.0.2 --save

使用

//store/index.js
import { createStore } from 'vuex';

export default createStore({
    state: {
       
    },
    mutations: {
       
    },
    actions: {
      
    },
});

10、vscode插件

setting.json配置

{
  //autoFixedOnSave 设置已废弃，采用如下新的设置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  //autoFix默认开启，只需输入字符串数组即可
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  "editor.snippetSuggestions": "top",
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  //vue自动补全
  "files.associations": {
    "*.vue": "vue",
    "*.ejs": "html",
    "*.js": "javascript"
  },
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "security.workspace.trust.untrustedFiles": "open"
}

11、全局事件总线