Vue自学笔记(1)——Vue环境、项目搭建

写在前面的话

从今天开始正式学习Vue。之前一直想学习利用Vue进行Web开发，也坚持过一段时间，但是当时并没有总结，很长时间不用，也基本都忘干净了。而且对于一个非计算机软件专业的渣硕，导师对于项目只有一个原则，就是功能实现了就可以，怎么实现的不管，所以之前的项目一直都是传统三大技术HTML + CSS + JQuery，再配合上BootStrap框架，反正页面美观度上确实也说得过去，再加上万能的胶水语言Python做后端，功能上也都基本上可以实现。前两天跟一个搞前端的大牛一起吃饭，我问他为什么要学习Vue？大牛用非常直白的话跟我讲，就好比你要挖坑，HTML就是用手刨坑，Vue就是给你一把铁锹。仔细想想平时用三大技术开发确实也走了不少弯路，也想静下心来真真正正的把Vue学一学。所以，从今天开始，正式进入Vue学习，同时把每次学到的东西都在博客中总结一下，省的以后忘得时候也能帮助回忆回忆。废话不多说，直接开始。

Vue环境及项目搭建

1. 首先需要安装Node.js。安装过程比较简单，直接在官网下载安装包安装就行，记住要选上add path，即添加到环境变量中，当然默认就是是选上的。安装完成后，在cmd中输入node -v，能显示出node版本号，就说明安装好了。
2. 安装淘宝镜像cnpm：打开cmd，由于node在第一步中已经加入环境变量中了，所以直接在命令行中输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

相比于传统npm安装依赖包，淘宝镜像会快一些，以下步骤统一用cnpm安装依赖，当然是用npm也可以。

3. 安装Vue CLI 3.0脚手架工具：

cnpm install -g @vue/cli

在命令行中输入以下命令，检查此时Vue版本是否正确（3.x）：

vue --version

4. 快速创建Vue项目

这里介绍两种方法：
（1）基于交互式命令行创建新版Vue项目

这部分首先通过命令行cd 到一个自定义的vue项目存放路径，再执行以下命令(建议管理员身份运行cmd)：

vue create "项目名称"

eq:
vue create  "vue_demo"

选项建议参照如下配置，也可以根据需要自行调配：

执行上述过程，可以在自定义目录下新建一个名为vue_demo的Vue项目。

（2）基于2.X的旧模板，创建旧版Vue项目

这部分首先通过命令行cd 到一个自定义的vue项目存放路径，再执行以下命令(建议管理员身份运行cmd)：

vue init webpack  "项目名称"

eq:
vue init webpack  "vue_demo"

选项建议参照如下配置，也可以根据需要自行调配：

执行上述过程，可以在自定义目录下新建一个名为vue_demo的Vue项目。

cd 到项目名称目录下，执行：

cnpm install

根据package.json内容安装相关依赖。

5. 在vs code中打开上述新建好的项目，在vs code内的终端下输入：

// 方式（1）
cnpm run serve

// 方式（2）
cnpm run dev

这个Vue项目就运行起来了，vs code 中显示：

此时浏览器中输入上述网址，即可看到Vue项目运行结果啦：

以上都没问题，说明Vue搭建环境这块已经没问题了。

附：Vue ci3 目录结构

6. 如果想打包上线的话，执行

cnpm run build

执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

实际上，在部署的时候要注意，假设静态服务器的域名是 http://static.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的静态资源以此类推。

补充一点

当我们移植别人的Vue项目时，往往拿到的项目是目录中没有node_modules文件夹的。这个文件夹中的内容主要是根据文件目录中的package.json文件安装的一堆依赖，文件很大，往往100多MB，为了拷贝方便，所以一般这个文件就删掉了。因此，拿到这种Vue项目时，首先cd到Vue项目目录中，再执行：

cnpm install

稍等一会儿，这个项目需要的所有依赖就都安装好了，然后再进行run serve等操作。

再补充一点

如果想项目运行时直接打开浏览器显示，设置端口等操作，可以在项目根目录下，新建一个vue.config.js文件，内容如下：

vue.config.js

module.exports = {
	devServer:{
		open:true, //自动打开浏览器
		port:8888 // 设置端口
	}
}

总结

总体来说Vue项目搭建过程还是比较简单的，以后建立新的Vue项目就可以按照以上步骤进行了，但是安装环境等就不用再重复安装啦。

未完待续。。。

本人原创，转载请标明出处，谢谢合作！