共计 1921 个字符,预计需要花费 5 分钟才能阅读完成。
4. Vue 脚手架
4.1 Vue 脚手架的根本用法
Vue 脚手架用于疾速生成 Vue 我的项目基础架构,其官网地址为:地址
应用步骤
1. 装置 Vue 脚手架:npm install -g @vue/cli
基于脚手架创立 vue 我的项目
// 1. 基于 交互式命令行 的形式,创立 新版 vue 我的项目
vue create my-project
// 2. 基于 图形化界面 的形式,创立 新版 vue 我的项目
vue ui
// 3. 基于 2.x 的旧模板,创立 旧版 vue 我的项目
npm install -g @vue/cli-init
vue init webpack my-project
这里利用图形化界面创立 vue 我的项目:
命令行输出:vue ui
4.2 Vue 脚手架生成的我的项目构造剖析
node_modules | 依赖包目录 |
public | 动态资源目录 |
src | 源码目录 |
src/assets | 资源目录 |
src/components | 组件目录 |
src/views | 视图组件目录 |
src/App.vue | 根组件 |
src/main.js | 入口 js |
src/router.js | 路由 js |
babel.config.js | babel 配置文件 |
4.3 Vue 脚手架的自定义配置
1. 通过 package.json 配置我的项目
// 必须是符合规范的 json 语法
"vue": {
"devServer": {
"port": "8888",
"open" : true
}
}
留神:不举荐应用这种配置形式 。因为 package.json 次要用来治理包的配置信息;为了不便保护,举荐将 vue 脚
手架相干的配置,独自定义到 vue.config.js 配置文件中。
2. 通过独自的配置文件配置我的项目
① 在我的项目的跟目录创立文件 vue.config.js
② 在该文件中进行相干配置,从而笼罩默认配置
// vue.config.js
module.exports = {
devServer: {port: 8888}
}
5. Element-UI 的根本应用
Element-UI:一套为开发者、设计师和产品经理筹备的基于 Vue (这里应用 Vue 2.0) 的桌面端组件库。
官网地址为:地址
1. 基于命令行形式手动装置
① 装置依赖包 npm i element-ui –S
② 导入 Element-UI 相干资源
//src/main.js
// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相干款式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);
//src/App.vue
<template>
<div id="app">
<!-- element-ui -->
<el-row>
<el-button> 默认按钮 </el-button>
<el-button type="primary"> 次要按钮 </el-button>
<el-button type="success"> 胜利按钮 </el-button>
<el-button type="info"> 信息按钮 </el-button>
<el-button type="warning"> 正告按钮 </el-button>
<el-button type="danger"> 危险按钮 </el-button>
</el-row>
<!-- element-ui -->
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {padding: 30px;}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {color: #42b983;}
</style>
2. 基于图形化界面主动装置
① 运行 vue ui
命令,关上图形化界面
② 通过 Vue 我的项目管理器,进入具体的我的项目配置面板
③ 点击 插件 -> 增加插件,进入插件查问面板
④ 搜寻 vue-cli-plugin-element 并装置
⑤ 配置插件,实现按需导入,从而缩小打包后我的项目的体积
// src/main.js
import './plugins/element.js'