杭州建设网官方网站,建筑工程网络计划图绘制软件,哪个公司做网站专业,百度搜索 网站介绍一、准备工作 1. 首先需要下载nodejs#xff0c;安装后打开命令窗口可以使用npm包管理工具 2. npm集成在node中的#xff0c;所以直接输入npm-v查看npm的版本信息 3.安装Vue CLI #xff08;使用npm全局安装Vue CLI工具#xff0c;确保已安装 Node.js环境。#… 一、准备工作 1. 首先需要下载nodejs安装后打开命令窗口可以使用npm包管理工具 2. npm集成在node中的所以直接输入npm-v查看npm的版本信息 3.安装Vue CLI 使用npm全局安装Vue CLI工具确保已安装 Node.js环境。
npm install -g vue/cli或 cnpm install -g vue/cli 安装成功后命令行输入 vue -V 可以查看版本号 二、创建Vue项目
2.1通过Vue CLI创建新项目选择默认配置或手动配置。
这里我选手动配置 immoc-datav-report-dev为项目名
vue create immoc-datav-report-dev 这样项目就已经初始化完毕了
tips
如果在安装过程中出现报错可能是因为npm在国内安装比较慢推荐使用 淘宝镜像 cnpm 进行安装 输入该命令回车这样安装就会很快
vue create immoc-datav-report-dev --registryhttps://registry.npm.taobao.org
接下来可以使用 npm run serve 运行项目浏览器查看效果
此外
我们可以在APP.Vue 文件中做一下全局样式配置根据自己的需求配置哈不需要的话可以不配置 style langscss
html,
body,
#app {margin: 0;padding: 0;width: 100%;height: 100%;
}
/style三、安装Element UI
两种方式安装
官网Element - The worlds most popular Vue UI framework
1 . 通过npm或yarn安装Element UI库。
npm install element-ui --save
1.1 全局引入Element UI
在项目的 main.js 文件中导入Element UI并注册。
import Vue from vue
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.cssVue.use(ElementUI)
1.1.1 按需引入Element UI组件可选
若需优化体积可安装babel插件并按需引入组件。
npm install babel-plugin-component -D
修改babel.config.js文件
module.exports {plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}]]
}
1.1.2 在组件中单独引入所需组件
import { Button, Select } from element-ui
Vue.use(Button)
Vue.use(Select)
1.1.3 运行项目
启动开发服务器查看效果。
npm run serve
1.1.4 测试Element UI组件
在任意组件模板中使用Element UI组件验证是否成功引入。
el-button typeprimary测试按钮/el-button
2.通过下载插件安装Element UI 库
输入命令
vue add element 出现这个 Still proceed 输入y 就可以了这是因为我们项目初始化之后有文件修改没有进行commit提交出现的提示哈。
然后会安装一个 vue-cli-plug-element 插件这个插件会帮我们完成一个Element UI 的安装和引入
成功安装后 会出现一个提示是全量引入 还是 按需引入 全量引入体积较大所以我们选择 按需引入 Improt on demand选择需要加载的文字 zh-cn 安装成功之后APP.Vue 页面发生了一些变化多了一些代码这个是插件它帮我们写了一些ELment 样例测试 总结
到这里我们就已经初步搭建完一个简单的 vueElement UI的项目了可以按照需求进行页面开发咯
