前端入门学习笔记（三十三）vue.js入门（一）vue环境配置、运行别人的vue项目

今年七月份进公司实习，公司前端采用的是vue+elementUI，边学边做，现在应该算是基本入门了，这周末总算是有时间整理一下最近所学的东西。

最大的感受就是如果不先学习再做，每个功能都靠百度，或者看别人的源码来尝试理解框架，不但上手慢，而且对于个人的压力也是十分大的，我有将近半个月的时间就是这样被浪费掉的，所以如果搜索到这篇笔记的同学有可能的话，还是先学习基本知识，再尝试做项目

此vue入门笔记所参考的学习资料是《Vue 2.5开发去哪儿》以及vue官方教程文档
写笔记的时候，vue的版本是2.6.1

1.vue安装与使用

1.1简单项目（此学习笔记采用）

可以直接参考vue的官方教程 https://cn.vuejs.org/v2/guide/installation.html
如果是在进行vue的学习，或者是小项目，使用导入的方法就可以了

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

---

1.2复杂项目

如果是大型项目的话，可使用NPM工具，直接参考vue官方教程 https://cn.vuejs.org/v2/guide/installation.html

大致可以按照以下步骤

1. 安装node.js，之后就可以在命令行中使用npm命令
2. npm install vue， 安装vue
3. npm install vue-cli -g ， 全局安装vue-cil
4. npm install webpack -g，全局安装webpack

如果速度比较慢的话，可以使用命令
npm config set registry https://registry.npm.taobao.org
这样可以将npm 永久改为淘宝源

新建项目的话可以使用

1. vue init webpack ”项目名称“，一路yes
2. npm install
3. npm run dev

如果速度慢，卡在download 的话，你可以尝试ping github.com，查看是否立能够连上GitHub，如果不行，百度一下就可以解决这个问题了
这里面生成的vue文件是有标签<template>包裹内容的，如果你在网上查找一些vue实例是由<template>包裹的话，你可以考虑使用新建一个vue项目进行试用。
如果一开始就接触这种项目型的东西，难度梯度较大，故建议使用简单方法。

---

2.运行别人的vue项目

进入项目的目录，即有package.json，package-lock.json这两个文件的目录
如果已经有node_modules，则跳过步骤1，直接执行步骤2

按住shift，右键空白处，点击再 此处打开cmd窗口（或者是 在此处打开powerShell窗口）
输入指令

1. npm install，进行依赖环境配置
2. npm run dev，即可运行vue项目

此处简单讲一下，package保存的是环境相关的东西，输入以上指令后，将会多出node_modules这个文件夹，里面就是这个vue项目所依赖的东西。