创建Vue，引入less和element

最新推荐文章于 2023-03-10 14:24:31 发布

Ther19

最新推荐文章于 2023-03-10 14:24:31 发布

阅读量342

点赞数

分类专栏： vue基础笔记文章标签：前端 vue.js less

本文链接：https://blog.csdn.net/weixin_68915174/article/details/127930179

版权

vue基础笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

创建一个Vue项目

1.安装最新版本Node.js，在文件夹的命令行（在文件夹里输入cmd回车）运行以下命令

npm init vue@latest

2. 输入项目名称后继续不断回车

Project name: … <my-project-name>

3.输入以下命令进入项目目录并安装依赖和启动项目

cd <my-project-name>  //进入项目目录
npm install //安装依赖
npm run dev //启动项目

4.npm install报错问题：

尝试依次输入
npm config get proxy
npm config get https-proxy
两者均返回null，否则执行 set null命令，在安装淘宝镜像
npm config set registry http://registry.cnpmjs.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org
再执行npm install

5.创建后的vue主要板块

App.vue板块

index.html板块

main.js板块

less

在node.js环境中里使用less

npm install -g less

在浏览器环境中使用 less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

vue项目中使用less

安装步骤

1.安装less最新版本和less-loader的7.2.0
npm i less -D
npm i less-loader@7.2.0 -D
2.安装style-resources-loader和vue-cli-plugin-style-resources-loader最新版
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
3.在项目根目录的vue.config.js文件（没有则新建）添加以下配置：
const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/global.less')
      ]
    }
  }
}
4.在项目中使用less
<style lang="less">
...
</style>

element

1.浏览器直接引入element

安装element

npm install element-plus --save

引入element

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

2.vue引入element

安装element

npm install element-plus --save

在main.js中引入element

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

在vue中运用

<template>
  <el-button>I am ElButton</el-button>
</template>

启动项目

npm run dev //启动项目，点击链接查看渲染页面效果

ctrl+c //结束进程操作