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

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、全局事件总线

cnpm i mitt -S

12、axios安装

cnpm i axios -S