对于前端，之前我几乎没什么兴趣，一个是不喜欢js代码风格，一个是css样式调试到吐。但是只写后台，不会点前端，也很苦逼。于是不得不挑选一款前端框架学学，又想做到前后端分离，综合之下，选了vue.

说实话，看官方文档，让小白引入<script src="https://cdn.jsdelivr.net/npm/vue"></script>来入门，我觉得太麻烦了，也太浪费时间。因为我根本不想写html、js那些东东，实际开发中也用不到。于是直接采用脚手架来构建项目入门。

对于前端小白，真是不明白webpack、node.js、npm、脚手架这些玩意，用程序员的话就是前端开发环境搭建。文章以window系统做演示，linux、Mac系统基本上大同小异，好了，进入主题了。

环境搭建

说一下构建vue项目的几个步骤,跟着这几个步骤搭建一下环境，构建出一个可以运行起来的vue程序，基本上就入门第一步了：

安装node.js
安装webpack
安装vue-cli脚手架构建工具
项目构建

一、安装node.js

从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下，如果出现相应的版本号，则说明安装成功。

C:\Users\g580>node -v
v9.8.0

安装node.js后，就已经自带npm（包管理工具）了，查看npm版本号使用命令 npm -v,如下：

  C:\Users\g580>npm -v
  v5.6.0

二、安装webpack

之前npm（包管理工具）已经安装成功了，后续的操作都使用npm命名来操作。
打开命令行工具输入：npm install webpack -g，-g表示全局安装，安装完成之后输入 webpack -v，如下，出现相应的版本号，则说明安装成功。

  C:\Users\g580>webpack -v
  v4.1.1

三、安装vue-cli脚手架构建工具

打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意是大写的“V”），如下，出现相应的版本号，则说明安装成功。

  C:\Users\g580>vue -V
  v2.9.3

四、vue-cli构建项目

通过以上三步，初始的环境基本上已经搭建好了，下面就可以构建和初始化vue项目了。

4.1 新建一个工作用于目录(我的是workplace，你随意)或者选择一个已存在的目录 用于存放项目

4..2 打开命令工具，进入这个工作目录，输入命令行vue init webpack 项目名：

  C:\Users\g580>workplace>vue init webpack project(项目名)

注：项目名不能大写，不能使用中文,使用上述命令初始化一个vue项目，其中webpack是构建工具，project是整个项目文件夹的名称，这个文件夹会自动生成在你的工作目录中。下面是构建过程：

$ vue init webpack project--------------------- 安装vue-cli,初始化vue项目的命令
? Target directory exists. Continue? (Y/n) y---------------------找到了project这个目录是否要继续
? Target directory exists. Continue? Yes
? Project name (project)---------------------项目的名称（默认是文件夹的名称）
? Project name project
? Project description (A Vue.js project)---------------------项目描述，可以不写
? Project description A Vue.js project
? Author (OBKoro1)---------------------项目创建者
? Author OBKoro1 
? Vue build (Use arrow keys)--------------------选择打包方式，有两种方式（runtime和standalone），回车默认即可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安装路由，一般都要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则，这里选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试 
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
 cd project)--------------------进入你安装的项目
 npm install)--------------------安装项目依赖
 npm run dev)--------------------运行项目
Documentation can be found at https://vuejs-templates.github.io/webpack)

构建完成，即可看见项目了，结构如下，也就是project文件下的文件：

image.png

4.3 安装项目依赖

进入project文件夹，shift+右键，选择菜单：在此处打开命令窗口，即可打开cmd命令工具。或者直接使用命令 cd 进入project文件夹。输入命令：

C:\Users\g580>project>npm install

4.4 运行项目

进入project文件夹，shift+右键，选择菜单：在此处打开命令窗口，输入命令：

C:\Users\g580>project>npm run dev

执行完成：

image.png
打开浏览器，输入地址：http://localhost:8080，先不要猴急关闭命令工具哟，因为在本地运行，关了就运行不了了。 image.png

如果没有出现 上图的话，可能你的8080端口被占用了，可以在config/index.js中将dev中的port改为其他值。

到此，用脚手架构建vue项目结束。
学习vue.js建议还是先学习和了解一下html、css、js这些相关知识，等掌握和了解了，再来深入学习js会更好。