vue快速入门(二):vue-cli + element配置 , 快速构建vue项目
2019-02-25 17:26
796 查看
vue-cli 快速构建vue项目
一、前期准备工作
-
安装nodejs
直接去官方网站下载最新的nodejs http://nodejs.org 下载好之后下一步下一步安装既可
-
查看nodejs和npm的版本
node -v
npm -v
二、安装vue-cli
- 全局安装vue-cli
npm i vue-cli -g
-
查看版本
vue -V (大写的V)
-
在桌面初始化项目 (shift + 鼠标右键 ,在此处打开命名窗口,有的是powershell)
vue init webpack 项目名称 (项目的名称不要使用大写)
如:
vue init webpack vue-cms
-
确认需要安装需求
三、安装vue PC端ui element-ui
完整引入方式
-
安装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);
按需引入方式
-
安装 element-ui 和 babel-plugin-component
npm i element-ui -S
npm install babel-plugin-component -D
-
在.babelrc文件中
{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } } ps: 可能配置完这个文件之后 npm run dev 会报 webpack-dev-server的错误,这个时候直接把node_modules文件删除重新npm i 安装包
-
在main.js 文件中按需引入组件
import { Button } from 'element-ui'; Vue .use(Button)
有兴趣小伙伴可以来关注一下我们长沙校区黑马程序员,下面是微信二维码,请加上备注-CSDN
相关文章推荐
- 使用 vue-cli + element-ui 快速搭建项目
- vue-cli快速构建项目以及引入bootstrap、jq
- 快速入门vue-cli配置
- 使用VUE-CLI构建一个项目基本的配置
- 快速入门vue-cli配置
- 快速入门vue-cli配置
- 使用 vue-cli + element-ui 快速搭建项目
- 快速入门vue-cli配置
- 快速入门vue-cli配置
- vue-cli 快速构建项目
- 基于@vue/cli 3.0 快速构建vue 项目
- 快速入门vue-cli配置
- 快速入门vue-cli配置
- vue-cli快速构建项目结构
- vue-cli快速构建vue项目
- vue-cli+elementUI+webstorm项目配置
- Vue.js:使用vue-cli快速构建项目
- 快速入门vue-cli配置
- vue-cli快速构建项目以及引入bootstrap、jq
- 从0到1构建vueSSR项目之node以及vue-cli3的配置