vue 创建项目

一、创建项目

vue3运行以下命令来创建一个新项目：

vue create hello-worlde

　　

vite运行以下命令来创建一个新项目：

 npm init vite@latest

　　

二、安装element-ui

npm i element-ui -S

　完整引入

　　在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

 

三、安装 element-plus 

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

　　完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

　　导入element-plus 图标

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

　　main.js引入

import * as ElementPlusIconsVue from "@element-plus/icons-vue";
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

  安装less

yarn add less less-loader --save-dev

　　安装axios

npm install axios
在main.js中引入
import axios from 'axios'

vue3.0 配置@根路径

安装 path模块

 

npm  install  path  --save

　　在vue.config.js中添加

 
 
const path = require('path');

function resolve (dir) {

  return path.join(__dirname, dir)

}


module.exports = {
    publicPath: '/', // 从 Vue CLI3.3 起已弃用，请使用publicPath
    outputDir: 'dist',
    lintOnSave: true,// 是否在保存的时候检查
    devServer: {// 环境配置
        host: 'localhost',
        port: 8088,
        open: true, //配置自动启动浏览器
    },
    // vue2.0
    // configureWebpack: {
    //     resolve: {
    //         alias: {
    //             '@': resolve('src')
    //         }
    //     }
    // },
    // vue3.0
    chainWebpack: config => {
        config.resolve.alias
            .set("@", resolve("src"))
            .set("assets", resolve("src/assets"))
            .set("components", resolve("src/components"))
            .set("views", resolve("src/views"))
        // .set("base", resolve("baseConfig"))
        // .set("public", resolve("public"));
    },
}

　　

 

 
posted @ 2022-05-24 14:59  贾平凡  阅读(73)  评论(0)    收藏  举报