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

文自怡
2023-12-01

转载路径: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前需安装修改的配置:

  1. 安装 loader 模块:
    cnpm install style-loader -D
    cnpm install css-loader -D
    cnpm install file-loader -D

  2. 安装 Element-UI 模块
    cnpm install element-ui --save

  3. 修改 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 //配置文件

 类似资料: