【vue2项目实战】---- 1.项目准备

vue_backstage

1. 项目初始化

1.1 准备内容

• vue-cli
• vue-router@3
• vuex@3
• axios
• element-ui
• less-loader@7
• node
• express
• iconfont(尝鲜)

1.2 项目整理

• 清理组件

// App.vue改为
 <div id="app">
    <HelloWorld />
 </div>

// HelloWorld.vue改为
<div>
<el-button type="primary">我是测试按钮</el-button>
<div>

注:外围要包裹一个div标签，否则会报错

• CSS初始化，将https://meyerweb.com/eric/tools/css/reset/内容复制到reset.css中，并在main.js中引入。

mkdir /src/assets/css
touch /src/assets/css/reset.css

// main.js
import "../src/assets/css/reset.css"

• 创建router目录

mkdir /src/router
touch /src/router/index.js

// main.js中引入
import router from '../src/router'
new Vue({
  render: h => h(App),
  router	// router配件
}).$mount('#app')

注：自定义vscode的快速生成路由插件，左下角“⚙” ---- “配置用户代码片段” ---- 输入“javascript.json”，将下面代码放入=={ }内。以后就可以输入"vr"==回车快速生成

// 创建快捷键vr
"Print to console1": {
		"prefix": "vr",
		"body": [
				"import Vue from 'vue'",
				"import VueRouter from 'vue-router'",
				"",
				"Vue.use(VueRouter)",
				"",
				"const routes=[",
				"",
				"]",
				"",
				"export default new VueRouter({",
				"     routes",
				"})",
		],
	}

• 创建store目录,给vscode添加快速生成快捷键，代码如下。

mkdir /src/store
touch /src/touch/index.js

// main.js中引入
import store from '../src/store'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

// 创建快捷键vs
"Print to console2": {
		"prefix": "vs",
		"body": [
					"//该文件用于创建Vuex中最为核心的store",
					"import Vue from 'vue'",
					"//引入Vuex",
					"import Vuex from 'vuex'",
					"//应用Vuex插件",
					"Vue.use(Vuex)",
					"",
					"//准备actions——用于响应组件中的动作",
					"const actions = {}",
					"//准备mutations——用于操作数据（state）",
					"const mutations = {}",
					"",
					"//准备state——用于存储数据",
					"const state = {}",
					"",
					//创建并暴露store
					"export default new Vuex.Store({",
					"   actions,",
					"   mutations,",
					"   state",
					"})"
		],
	}

• CSS文件夹内新建images文件夹

mkdir /src/assets/css/images

• element-ui安装及按需引入
  a. 安装

npm i element-ui
npm install babel-plugin-component -D

​ b. 配置

// babel.config.js
 "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

​ c. 创建文件

mkdir /plugins/element.js

​ d. 引入

// src/plugins/element.js
import { Button } from "element-ui";
import Vue from 'vue'
Vue.use(Button)

// main.js中引入
import 'element-ui/lib/theme-chalk/index.css'	// ★★
import '../src/plugins/element'

注：引入element-ui时，不要将css文件遗忘。

• 安装less-loader@7

npm install less-loader@7

• iconfont的三种使用方式
  a. 第一种，直接使用url地址

touch /src/assets/css/style.css

// style.css中引入
@import url(//at.alicdn.com/t/c/font_3616892_xejckx9wgli.css);

// main.js中引入
import "../src/assets/css/style.css"

// HelloWorld.vue中测试
<i class='iconfont icon-align-right'></i>

​ b. 第二种方法，将上面生成的地址，在浏览器中打开，并复制新建的/src/assets/css/style中，然后在main.js中采用@import url('../src/assets/css/style'),同第一中方法类似。

​ c. 第三种方法，将字体全部下载下来，新建/src/assets/css/iconfont，将下载的内容存入，然后在main.js中引入iconfont.css文件

☆ 下载的文件