项目原因被安排了Vue前端任务，电脑重装过系统，只能重新配置开发环境，虽然很快就被安排了其他工作，但是想到以后可能还会出现需要用到vue的情况，就忙里偷闲，整理了下过程，写下来以备不时之需。
在网上找教程，总有种“大神觉得你都会了”的感觉，然而菜鸟们表示我们真的不懂啊！！！（怨念颇深(╯‵□′)╯︵┻━┻......所以说就萌生了个想法，说不定由我这样的小白来写教程，对其他小白来说可能会比较简单易懂一点。以后工作的间隙我会断断续续写一些vue教程，各方面应该都有，而且是比较基础的部分，希望能帮到大家。
好了，话不多说，进入我们今天的主题！
- 首先，要确保node和npm可用，输入以下代码检测：
node -v
npm -v
出现版本号即可。
- 全局安装webpack：
cnpm install webpack -g
- 安装vue：
npm install vue
- 安装vue脚手架：
npm install vue-cli -g
-
新建一个文件夹用来存储搭建的vue工程
-
打开文件夹，输入以下代码开始创建工程：
vue init webpack-simple vueprac-1
注意：
此处的vueprac-1是我取的工程名称，工程名字不可用中文
这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。
接着会出现一些提示，包括vue-cli的当前版本最新版本什么的，不用管，接着会出现一些初始化设置：
Project name （vueprac-1）
Project description （A Vue.js project）
Author （XXX）
License （MIT）
Use sass? （No）
初始化设置这里可以直接回车默认跳过，也可以选择填写，看项目情况要求。
- 打开新建工程所在文件夹
cd vueprac-1 // 此处为工程名称，本工程为vueprac-1
- 安装工程开展所需的项目依赖
npm install
这一步经常会出现WARN，通常是没有影响的：
image.png
如果出现了ERR!就要注意了，这意味着工程出错，可以尝试以下几种解决方案：
首先确保自己打开工程的地址无误；
安装某个包时出现错误，可以重新下载安装项目依赖；
删除工程目录下的node_modules包，重新安装。
image.png
- 安装好后的项目工程结构如下所示：
image.png
- 一切都准备好后，就可以运行项目啦
npm run dev
注意：
“run”对应的是package.json文件中，scripts字段中的dev，相当于启动项目的快捷指令。大家可以去找一找，因为不同项目的启动指令未必相同哦。
此时，打开http://localhost:8080就能看到vue页面啦：
image.png
开发时执行的主要操作都在src目录下，在这里进行存储图片、编写样式、传输数据等操作，不过这都是以后要做的，今天的小天使们只要成功的搭建好环境、安装好依赖，创建好项目，就已经很了不起啦！
网友评论