《分布式微服务电商》专题-电商项目前端Vue模块化开发

Posted 2021-07-07 熊猫IT学院

文章目录

• • 1.npm install webpack -g
  • 2.npm install -g @vue/cli-ini
  • 3.初始化vue项目
  • 4.启动vue项目
  • 5.模块化开发
  • • 5.1.项目结构
    • 5.2.Vue单文件组件
  • 6.vscode添加用户代码片段（快速生成vue模板）

1.npm install webpack -g

全局安装webpack

npm install webpack -g

2.npm install -g @vue/cli-ini

全局安装vue脚手架

npm install -g @vue/cli

3.初始化vue项目

vue init webpack appname：vue脚手架使用webpack模板初始化一个appname项目

4.启动vue项目

项目的package.json中有scripts，代表我们能运行的命令
npms tart=npm run dev：启动项目
npm run build：将项目打包

5.模块化开发

5.1.项目结构

运行流程

• 进入页面首先加载index.html和main.js文件
• main.js导入了一些模块【vue、app、router】，并且创建vue实例，关联index.html页面的<divid=”app”>元素。使用了router，导入了App组件。并且使用<App/>标签引用了这个组件
• 第一次默认显示App组件。App组件有个图片和<router-view>，所以显示了图片。但是由于<router-view>代表路由的视图，默认是访问/#/路径（router路径默认使用HASH模式）。在router中配置的/是显示HelloWorld组件。
• 所以第一次访问，显示图片和HelloWorld组件
• 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用<router-linkto="/foo">GotoFoo</router-link>标签

5.2.Vue单文件组件

Vue单文件组件模板有三个部分：

<template>
  <div>
    <h1>你好，Hello，{{name}}</h1>

    <el-radio v-model="radio" label="1">备选项1</el-radio>
    <el-radio v-model="radio" label="2">备选项2</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三',
      radio: '2'
    }
  }
}
</script>

<style>
</style>

Template：编写模板
Script：vue实例配置
Style：样式

添加路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

页面访问效果：

链接跳转：

6.vscode添加用户代码片段（快速生成vue模板）

文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json确定

{
	"生成 vue 模板": {
		"prefix": "vue",
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			"//import 引入的组件需要注入到对象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"//这里存放数据",
			"return {",
			"",
			"};",
			"},",
			"//计算属性 类似于 data 概念",
			"computed: {},",
			"//监控 data 中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {",
			"",
			"},",
			"//生命周期 - 创建完成（可以访问当前 this 实例）",
			"created() {",
			"",
			"},",
			"//生命周期 - 挂载完成（可以访问 DOM 元素）",
			"mounted() {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 创建之前",
			"beforeMount() {}, //生命周期 - 挂载之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 销毁之前",
			"destroyed() {}, //生命周期 - 销毁完成",
			"activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发",
			"}",
			"</script>",
			"<style  scoped>",
			"$4",
			"</style>"
		],
		"description": "生成 vue 模板"
	}
}

以后新建app.vue，键入vue,按下回车键,自动补全vue模板代码