1.Vue环境搭建以及vue-cli使用
1.1 Vue的环境搭建
（1）第一种方式：在页面用<script>标签引入CDN
在html文件的<head>标签中引入<script>标签，src指向CDN，多种CDN的写法可参考https://cn.vuejs.org/v2/guide/installation。
以下几种都可以，刷新页面，看开发者工具中的Network即可看到相应文件被加载进来。
https://unpkg.com/[email protected]/dist/vue.js
https://unpkg.com/[email protected]/dist/vue.min.js（压缩版本）
https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
https://cdn.jsdelivr.net/npm/vue
https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"hello vue"
}
});
</script>
</body>
</html>（2）第二种方式：使用npm命令。
步骤：
- （1）在相应目录下执行如下npm命令，该目录下得到node_modules文件夹和package.json文件
cnpm install vue --save
- （2）在相应html文件中的<head>中添加<script>标签，src指向本地的vue.min.js文件
<script src="node_modules/vue/dist/vue.min.js"></script>
这里在window系统中，使用git bash来操作，这是一个用于windows的仿照mac的terminal的软件。首先在E盘创建几个文件夹，如图所示，在Demo01中创建index.html，目录和具体代码为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>{{message}}}</span>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"hello,vue"
}
});
</script>
</body>
</html>我们打开git bash，进入Demo01
cd /e/project_code/imooc/Demo01/
cnpm install vue --save
安装完成后，在Demo01文件夹中多出了一个node_modules文件夹和一个package.json文件
接下来要在index.html中修改代码，在<head>中加入<script>标签，src为本地的vue.js的路径，即 node_modules/vue/dist/vue.min.js（当然，选择vue.js也可以，这里带min的一般为压缩版本）
此时刷新页面，就可以发现成功使用了Vue
1.2 vue-cli使用
步骤：
- （1）在外层目录（目录0）中安装脚手架 cnpm install -g vue-cli
- （2）在目录0中初始化项目得到子文件夹
vue init webpack-simple Demo02或者vue init webpack Demo03
- （3）下载项目依赖 cnpm install（在相应的子文件夹中）
- （4）启动项目 cnpm run dev、cnpm run build（在相应的子文件夹中）
说明：这里第2步中的两种初始化项目的方式的区别在于后者更为完整，包含的内容更多，也更慢。这里3、4步在README.md文件中已经给出了提示，4对应的shell命令则可以在package.json的scripts字段找到。
依然在git bash中进入imooc文件夹，然后
cnpm install -g vue-cli //注意这里必须要全局安装（-g）
1.2.1 使用webpack-simple
安装完vue-cli之后，初始化一个简单webpack的Demo02
vue init webpack-simple Demo02
接着会提示进行项目名称、描述、作者等信息，这里项目名称一定要是小写的，创建完成显示为
接着回到webstorm，可以发现多出了一个Demo02文件夹，其中的结构为，可以发现脚手架工具已经帮助我们生成了结构
接着介绍一下关于项目启动相关的内容，打开package.json文件，在script字段查看shell命令，这里有dev和build，它们都是对应shell脚本。
这两个命令默认的格式是 cnpm run dev 以及 cnpm run build 但是需要安装才可以使用，比如在这里，我们在git bash中进入Demo02文件夹，然后输入cnpm run dev，结果如下，由于目前没有安装任何依赖，因此无法运行成功
上述运行失败的原因是没有安装依赖，其实README.md文件中已经给出了提示
接下来我们在git bash中输入 cnpm install 。因此，当我们在github上下载任何项目之后，第一件事就是要cnpm install，将该项目所依赖的插件全部下载下来。可以看到相应子文件夹Demo02中多了一个node_modules文件夹
接下来，我们以开发模式运行程序 cnpm run dev即可打开我们的网页。cnpm run dev中出现了问题，截图为
采用https://segmentfault.com/q/1010000013504323给出的方法，将Demo02中的node_modules删除，再重新cnpm install，再cnpm run dev即可，自动打开网页，显示为
1.2.2 使用webpack
我们在F盘创建了一个code文件夹，其中嵌套一个imooc文件夹，我们对imooc文件夹安装vue-cli，即
cnpm install -g vue-cli
接着我们使用如下命令创建一个项目子文件夹
vue init webpack Demo4
之后进入该子文件夹中，安装项目所需插件
cnpm install
最后启动项目，此处为dev环境
cnpm run dev
可以看出，启动的端口号为8080，这个可以在如下文件中进行修改：Demo4/config/index.js，如下位置
module.exports中的dev属性中的port属性，默认为8080
此时我们在任意浏览器中输入localhost:8080即可打开Demo4对应的网页。
此外，这里大概说一下整个项目中重要的几个文件：
- index.html 入口html文件
- main.js 项目入口，根实例对象就在这里创建的
- App.vue 根组件，（所有.vue结尾的都是一个组件）
- package.json 其中重要的字段有 "scripts"和"dependencies"
- config/index.js
- build/build.js和webpack.base.conf.js，webpack.dev.conf.js和webpack.prod.conf.js是在base基础上扩展的，check-versions.js是版本检查，utils.js是工具包