1. vue开发环境搭建
1) node
2) npm / cnpm (npm install -g cnpm --registry=https://registry.npm.taobao.org)
3) vue-cli@2.9.6
> npm install vue-cli@2.9.6 --global
> vue --version
2. vue工程
1) vue init webpack app01 通过vue的脚手架创建vue工程
2) cd app01
3) npm install /cnpm install
①创建项目可以直接选择vue-router进行安装
手动安装配置
> npm install vue-router --save
1)src/router/index.js 2. src/main.js
②也可以在npm install时自动安装
同时可安装vue的产品依赖qs、element-ui、axios
npm install axios --save
npm install element-ui --save
npm install qs --save
4) npm run start/dev
1.代码转换以及打包
2.启动静态服务器 webpack-server
3.部署,将打包后的代码部署到webpack-server上
5) http://localhost:8080
项目完成后打包部署到阿里云
npm runbuild
产生一个dist目录,此时产生的dist不能查看,需要将config/index.js中build的路径改为相对路径
3. vue项目结构
app01
build webpack的配置文件目录
config 当前项目的配置信息
dist 打包后文件存储目录(交付)
index.html
static
(js css img font)
node_modules 第三方模块
src 源码目录
components
...
main.js
App.vue
index.html 首页 第三方依赖 jquery/bootstrap/axios快速加载映入
package.json node项目的核心配置 --save -save-dev
.babelrc babel配置文件
.gitignore git忽略文件
node_modules
src
git 仓库
初始华本意 创建本地仓库
github git的远程仓库 相当于一个社区 ,开源项目的开发 ..
4. Vue实例
mvvm
model vm view
.vue vue模块文件
1) 模板
<template></template>
2) js
es6
export default {
data(){
return {
}
},
}
3) css
new Vue({
el:'#app',
data:{
msg:''
},
methods:{
foo(){
this 指向当前Vue实例
}
},
components:{
},
beforeMount(){
},
mounted(){
this指向当前Vue实例
}
})
结论:
1. vue实例对象如何访问
1) let vm = new Vue({})
2) 可以在methods,生命周期钩子函数中定义的方法内通过this来访问
2. vue实例可以直接访问data,methods中定义的属性和方法
this.a a定义在data中
this.foo() foo定义在methods中