1 vue基础使用
1.1 hello vue
新建一个hello.html文件，并编辑以下代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Tutorial</title></head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue.js!'
}
}
})
</script>
</html>
以上编辑一个简单的html文件，使用script标签引入了vue。
在代码中创建了一个vue对象，并初始化一些参数，如el 指定Vue挂载的元素，上面代码vue挂载到id为app的元素中；在data中返回返回message变量，在html中引用message变量，即{{message}}
保存代码并用浏览器打开，可以看到浏览器显示了Hello Vue!
1.2 v-if
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Tutorial</title></head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
</body>
<!--
引用vue.js，参考https://vuejs.org/v2/guide/installation.html
下面是通过<script>引入vue
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
seen: true
}
}
})
</script>
</html>
保存代码并用浏览器打开，可以看到浏览器输出“现在你看到我了”
按F12，并在Console中输入app.seen=false，回车，浏览器输出内容就消失了
1.3 v-on
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Tutorial</title></head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
<button @click="reverseMessage">反转消息</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</html>
v-on: 可以简写为@
1.4 其他指令
v-bind、v-for、v-model 等等请参考https://cn.vuejs.org/v2/guide/
2 npm
npm 是 JavaScript 的包管理工具，并且是 Node.js 平台的默认包管理工具。
npm是用node.js编写的，因此需要安装node.js才能使用npm。安装node.js后，就已经自带npm。
2.1 安装包命令
npm install <package_name> // package_name: 包名
上述命令执行之后将会在当前的目录下创建一个node_modules的目录(如果不存在的话)，然后将下载的包保存到这个目录下。安装完成之后，就可以使用它了
2.2 package.json
package.json用于管理你所安装的npm包的依赖，在开发过程中能清楚的查询安装的包的版本以及项目中使用的包依赖，便于开发组成员共享。以及项目的配置信息（比如名称、版本号、项目描述、许可证等元数据）。
3 vue-cli
3.1 安装vue-cli
npm install -g vue-cli
3.2 使用vue-cli创建vue项目
创建：vue init <template-name> <project-name>
template-name是模板，常用的是webpack
vue init webpack demo 输入该命令后，会要求输入项目相关信息
项目创建后的文件目录结构
|-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- utils.js // 构建工具相关 | |-- vue-loader.conf.js // webpack loader配置 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js // 测试脚本的配置 |-- src // 源码目录 | |-- components // vue所有组件 | |-- router // vue的路由管理 | |-- App.vue // 页面入口文件 | |-- main.js // 程序入口文件，加载各种公共组件 |-- static // 静态文件，比如一些图片，json数据等 |-- .babelrc // ES6语法编译配置 |-- .editorconfig // 定义代码格式 |-- .eslintignore // eslint检测代码忽略的文件（夹） |-- .eslintrc.js // 定义eslint的plugins,extends,rules |-- .gitignore // git上传需要忽略的文件格式 |-- .postcsssrc // postcss配置文件 |-- README.md // 项目说明，markdown文档 |-- index.html // 访问的页面 |-- package.json // 项目基本信息,包依赖信息等