Vue学习笔记：环境搭建+创建项目+Element-UI基础

最新推荐文章于 2024-09-12 07:50:54 发布

AUKO16

最新推荐文章于 2024-09-12 07:50:54 发布

阅读量285

点赞数

分类专栏：随手小笔记文章标签： vue css

本文链接：https://blog.csdn.net/weixin_46439193/article/details/106289266

版权

21 篇文章 1 订阅

订阅专栏

1.安装node
官网下载，傻瓜安装

2.安装脚手架cli

# 默认已安装npm,或者还可以使用cnpm
npm install -g @vue/cli

PS: 卸载脚手架cli

npm uninstall -g vue-cli

1.基于交互式命令行，创建新版vue项目

# 创建
vue create my-project

# 运行
cd my-project
npm run serve

2.基于图形界面，创建新版vue项目

# cmd到在项目目标存储目录
# 进入图形界面
vue ui

3.基于2.X旧模板，创建旧版vue项目

# 创建
vue init webpack my-project

# 运行
cd my-project
npm run dev

在这里插入图片描述

在这里插入图片描述

1.在package.json中配置项目(不推荐)
配置后重启服务方能生效。

  vue相关配置
  "vue": {
    "devServer":{ //devServer设置打包期间服务器相关配置
      "port":"8088",
      "open": true //打包成功后自动打开浏览器
    }
  },

在这里插入图片描述
2.单独的配置文件
在项目根目录中创建vue.config.js，将vue脚手架相关配置单独定义在该文件中。
重启终端运行后生效。

module.exports = {
    devServer:{
        //自动打开浏览器
        open: true,
        port: 8088
    }
}

在这里插入图片描述

# 安装element-ui
npm i element-ui -s

/**手动导入element-ui美化组件&样式 */
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// ElementUI安装为插件
Vue.use(ElementUI)

button的属性
在这里插入图片描述

关注

专栏目录