Vue教程之——入门安装及创建项目

项目原因被安排了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目录下，在这里进行存储图片、编写样式、传输数据等操作，不过这都是以后要做的，今天的小天使们只要成功的搭建好环境、安装好依赖，创建好项目，就已经很了不起啦！