1、npm install webpack -g

全局安装 webpack

2、npm install -g @vue/cli-init

全局安装 vue 脚手架

3、初始化 vue 项目；

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

4、启动 vue 项目；

项目的 package.json 中有 scripts，代表我们能运行的命令

npm start = npm run dev：启动项目

npm run build：将项目打包

5、模块化开发

1、项目结构

运行流程

 进入页面首先加载 index.html 和 main.js 文件。

 main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html

页面的

元素。使用了 router，导入了 App 组件。并且使用标签引用了这个组件

 第一次默认显示 App 组件。App 组件有个图片和，所以显示了图片。但是由于代表路由的视图，默认是访问/#/路径（router 路径默认使用

HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。

 所以第一次访问，显示图片和 HelloWorld 组件。

 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用Go to Foo标签

2、Vue 单文件组件

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

<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}
}
}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 {font-weight: normal;
}</style>

Template：编写模板

Script：vue 实例配置

Style：样式

3、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 lang='scss' scoped>","//@import url($3); 引入公共 css 类",
"$4","</style>"],"description": "生成 vue 模板"}
}