Vue Web开发（一）

1. 环境配置

1.1. 开发工具下载

1.1.1. HbuilderX

官网地址：https://uniapp.dcloud.net.cn/

1.1.2. Visual Studio Code

官网地址：https://code.visualstudio.com/Download

1.1.3. Node环境

官网地址：https://nodejs.cn/

正常软件安装下载即可，打开检cmd过安装包安装node环境会自带npm工具。

1.1.4. 安装cnpm

主要用来代替npm，因为npm下载速度过慢。

npm install -g cnpm -registry=https://registry.npm.taobao.org

1.1.5. 安装cnpm

npm install -g yarn

1.1.6. 安装 vue-cli 脚手架构建工具

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。

（1）输入命令：cnpm install -g @vue/cli

（2）验证是否安装成功

注意是大写V，这里是脚手架版本，不是Vue版本，跟Vue2、Vue3无关。

1.2. 创建项目

（1） vue create 项目名称（不能有大写字符可以使用中划线或下划线）

（2） 选择项目类型

成功后出现以下画面，我们选择Vue2。

项目创建完成后，会生成这些文件。package.json会存储我们下载的所有插件。

此处才是真正的Vue版本，cmd看到的是脚手架版本。

1.3. Element ui

Element ui 官方文档：Element - The world's most popular Vue UI framework

1.3.1. 全局引入Element ui

安装npm i element-ui -S，-S等价于--save--dev

--save：将保存配置信息到pacjage.json。默认为dependencies节点中。

--dev：将保存配置信息devDependencies节点中。

在mian.js入口文件中引入，import引入Element ui和样式，并Vue.use全局使用。

main.js文件
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

1.3.2. 按需引入Element ui

1.4. Vue路由使用

引入npm i [email protected]，这里使用指定版本。

在根目录下新建router文件夹，router文件夹下新建router.js文件，所有路由逻辑待会编写在这个router.js文件。

首先引入vue和vue-router，此处注意大小写！！！new一个VueRouter并用router接收，这样做是为了方便向外暴露router，进行修改配置mode为history，以数组的形式传入路由相关信息，用routes接收。

router/router.js文件
import Vue from 'vue';
// 注意这里模块是小写vue
import VueRouter from 'vue-router';
import Home from '../view/Home.vue';
Vue.use(VueRouter)
// routes是一个数组
import Vue from 'vue';
// 注意这里模块是小写vue
import VueRouter from 'vue-router';
Vue.use(VueRouter)
// routes是一个数组！！！！
const routes = [
    {
        path:'/',
        name:'Home',
        component:()=>import('../view/Home')//这个Home.vue页面待会会新建
    }
]
const router = new VueRouter({
    mode:'history',
    routes
})
export default router;

在根目录下新建view文件夹，view文件夹下新建Home.vue页面。

Home.vue文件
<template>
    <div>这是Home页面</div>
</template>
<script>
    export default{
        name:'Home',
        data(){
            return{}
        }
    }
</script>

在App.vue中写入，Home页面会展示过来，当然不仅仅是Home页面，新建其他页面绑定路由都可以。将vue原有的样式全部删除，后面会有影响。

//App.vue文件
<template>
  <div id="app">
    <!-- router-view会展示页面内容 -->
    <router-view></router-view>
  </div>
</template>
<script>
//记得引入
import HeeloWorld from '../components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
<style>
#app {
  /* 这里非常重要，这里将vue原有的样式全部删除，后面会有影响 */
  height: 100vh;
}
</style>

1.5. 路由切换

（1）router.js文件，添加/User路由，选择正确路径。

//router/router.js文件的routes数组
import Vue from 'vue';
// 注意这里模块是小写vue
import VueRouter from 'vue-router';
import Home from '../view/Home.vue';
Vue.use(VueRouter)
// routes是一个数组
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/user',
        name: 'User',
        component: () => import('../view/User')
    }
]
const router = new VueRouter({
    mode: 'history',
    routes
})
export default router;

（2）改写main.js文件

//main.js
import Vue from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
//ElementUI全局引入
// import ElementUI from 'element-ui';
// Vue.use(ElementUI)
//ElementUI按需引入
import Button from 'element-ui';
Vue.use(Button)
import router from '../router/router.js';
Vue.config.productionTip = false
new Vue({
	router,
    render: h => h(App),
}).$mount('#app')

（3） 改写HelloWorld.vue文件

//Helloworld.vue文件的template标签内容。
<template>
  <div class="hello">
    <!-- <el-row> -->
      <router-link to='/'>
          <el-button>Home按钮</el-button>
      </router-link>
      <router-link to='/user'>
          <el-button type="primary">User按钮</el-button>
      </router-link>
    <!-- </el-row> -->
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

（4）在App.vue中引入HelloWorld.vue组件。

//App.vue文件
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <router-view></router-view>
  </div>
</template>
<script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    name: 'App',
    components: {
      HelloWorld
    }
  }
</script>
<style>
  #app {
  height: 100vh;
  }
</style>

（5）在view文件夹下新建User.vue测试所用。

//User.vue文件
<template>
    <div>网上User页面</div>
</template>
<script>
    export default{
        name:'User',
        data(){
            return{}
        }
    }
</script>

可以通过两个按钮切换路由、切换页面。

源码下载