搭建VUE脚手架 + 引入element-ui

转载路径：https://segmentfault.com/a/1190000011023102
从新建vue项目到引入组件Element
一、新建项目
1.查看 node是不是已经安装好命令：node -v (没有安装的先安装环境):
https://nodejs.org/en/ node -v
2.查看 npm是不是已经安装好命令：npm -v (没有安装的先安装环境);
3.npm install -g cnpm --registry=https://registry.npm.taobao.org (安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)
4.安装 vue-cli
4.1、cnpm install -g vue
4.2、cnpm install -g vue-cli
5. 安装 webpack cnpm install -g webpack
6.cd 你的运行目录
7.新建vue项目 vue init webpack vuedemo（vuedemo文件路径名）

需要注意的是项目的名称不能大写，不然会报错。
1、Project name (my-project) # 项目名称（我的项目）
2、Project description (A Vue.js project) # 项目描述一个Vue.js 项目
3、Author 作者（你的名字）
4、打包方式（两种打包方式runtime 打包的是 /node_modules/vue/dist/vue.common.js；standalone 打包的是 /node_modules/vue/dist/vue.js 我选择的是默认的）Y
5、Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）Y
6、Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）N
7、Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）N
8、Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）N
9、Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）N
10、Should we run `npm install` for you after the project has been created<recommended>
(1.Yes,use NPM   2. Yes,use Yarn  3. No,I will handle that myself)  NPM

8.进入项目目录 cd vuedemo
9.安装vue-resource到项目中 npm install vue-resource （如果没有安装到可以执行这一步）
安装完毕后，在main.js中导入以下内容
import VueResource from ‘vue-resource’
Vue.use(VueResource)
10.安装依赖 cnpm install
11.运行项目 cnpm run dev
12.发布项目 cnpm run build（完成后，就会在项目目录下有多一个dist目录，把dist下的内容就可以放在web服务器上了。）
注：mac电脑需要在安装淘宝镜像前执行： sudo chown -R $USER /usr/local

二、使用element-ui前需安装修改的配置：

安装 loader 模块：
cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D
安装 Element-UI 模块
cnpm install element-ui --save
修改 webpack.base.conf.js 的配置（可加可不加）

下面是需添加的代码：

 {test: /\\\\\\\\.css$/,loader: "style!css"
},
{test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,loader: "file"
}

三、引入Element，前面已经全局安装了element-ui，只需要在Vue项目中引入即可
1、打开项目：src/main.js,添加下面三条
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)

四、然后在.vue文件里就直接可以用了
4.1 在router文件下的index中写入路由内容，例如：
login是我的登录页面,path:’/’ 表示浏览器打开时第一个出现的页面

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import main from '@/page/main'
//import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({mode:'history',//去掉使用vue-router后链接中的 “#！”routes: [{path: '/',component: login},{path: '/page',component: main}]
})

vue页面:例如：做一下修改,加入element-button按钮：

<template>
<div class="login"><form name = 'form' action=""><input id="username" type="text" placeholder="请输入手机号码或用户名" /><input id='pwd' type="password" placeholder="请输入密码" /><button onclick="login()">登录</button></form><div class="account"><p class="forget" style="float:right">忘记密码?</p><div class="register"><span>还没有账号?</span><a href="#">手机注册</a></div></div><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="text">文字按钮</el-button></div>
</template>

五、整体项目目录
–build
–config
–dist //npm run build 之后再生成的目录
–src
–components // 存放组件
–page //页面组件，由vue-router引入
–router //路由
–store // 数据流管理
main.js //入口文件
app.vue //主组件
–static //静态文件目录
.babelrc
.gitignore //git忽略上传文件
index.html //静态文件入口
package.json //配置文件

搭建VUE脚手架 + 引入element-ui相关推荐

基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
初学者搭建Vue脚手架工程
初学者搭建Vue脚手架工程 1.在前端的知识海洋里,各种前端框架自动化测试满天飞,正如在当下想不被淘汰,那只有不断的去学习心得知识,所以就有了今天的一次学习vue搭建脚手架的记录. 2.第一步:搭建v ...
webpack搭建vue脚手架
之前搞过的webpack版本搭建vue脚手架项目,今天分享一下! 在读这篇文章之前你可能需要了解一些webpack的配置才行否则可能看不懂部分配置首先我们的项目的src目录结构如下基本上与vue ...
搭建Vue脚手架工程
搭建Vue脚手架工程 Vue介绍 Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或 ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
Vue 入门之搭建vue脚手架
系列文章目录第一章 Vue 入门之搭建vue脚手架第二章 Vue入门之项目结构介绍第三章 Vue入门之基本语法第四章 Vue入门之企业站点开发实践第五章 Vue入门之前端部署文章目录系列 ...
VUE2版本引入Element UI
一句话的事儿 1,在cmd中打开vue项目文件夹,输入命令: vue add element 2,加载后的选项如下: How do you want to import Element? Fully ...
vue2引入Element UI的详细步骤
目录一.Element UI介绍 Element UI的特点: vue3引入Element plus的文章: 二.操作步骤三.快速上手测试(可做可不做) 一.Element UI介绍 Elemen ...
搭建vue脚手架以及 npm ERR! missing script: serve解决方法
目录 vue脚手架搭建 npm ERR! missing script: serve解决方法 vue脚手架搭建前提是安装好vue,可以先输入下面这行代码检查是否安装vue vue --version ...

搭建VUE脚手架 + 引入element-ui

搭建VUE脚手架 + 引入element-ui相关推荐

最新文章

热门文章