【老司机带你飞】vue.js脚手架（一）

vue-cli脚手架搭建

环境：node.js、mysql、vue-cli
工具：webstrom、Git

vue-cli脚手架的搭建所依赖的环境是node.js，使用的是node.js提供的npm命令，所以在开始脚手架搭建之前必须安装node.js环境。

前面的教程中有node.js的安装，可选择查看

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就可以了。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个包。

注意：全局安装命令之前，先要切换到node.js的安装目录
如：你将node.js安装在D盘

全局安装命令需要切换进目录，再安装

1. 安装vue-cli
   使用npm安装全局webpack，使用命令
   npm install -g webpack
   webpack -v 查看版本（可能出现是否安装webpack-cli，输入yes）
   
   全局安装vue-cli，使用命令
   npm install --global vue-cli
   vue -V 查看版本 （注意是大写的“V”）
   
   在node.js安装目录下，有如下文件
   
   在node_modules文件夹中，有webpack-cli和vue-cli的依赖模块
   
2. 使用vue-cli构建项目
   在电脑中某处创建一个文件夹vuepro，用来存放vue项目
   cd vuepro cmd命令进入这个文件夹
   vue init webpack vue-cli

? Project name (vue-cli) 项目名称，直接回车
? Project description (A Vue.js project) 项目描述，可以添加文字，或直接回车
? Author 项目作者，可以添加作者，或者直接回车
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML)
are ONLY allowed in .vue files - render functions are required elsewhere 选择打包
方式，默认选择运行+编译，直接回车
? Install vue-router? (Y/n) 是否安装路由，可以输入Y安装，也可以不安装，用到再
装
? Use ESLint to lint your code? (Y/n)  是否使用ESLint管理代码，ESLint是个代码
风格管理工具，是用来统一代码风格的，我们不用，输入n，回车
? Set up unit tests (Y/n) 是否安装单元测试，输入n，回车
? Setup e2e tests with Nightwatch? (Y/n) 是否安装e2e测试，输入n，回车
? Should we run `npm install` for you after the project has been created? 
(recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself 直接回车，开始安装模块；如果选择第三个选项，需要再输入 npm install 命令进行模块安装

等待安装，直至出现如下内容

cd vue-cli 进入项目目录
npm run dev 启动项目

在浏览器地址栏输入：http://localhost:8080，出现如下界面，说明项目构建成功。

3. 目录结构及其对应作用

4. vue-cli安装完成之后，你也可以使用webstrom创建vue.js项目（需要安装git）
选择项目位置

选择vue-cli，点击next，开始加载项目模板

写入项目名称，点击next

写入项目描述，点击next

写入项目作者，点击next

next

是否安装路由，选择no，next

是否安装单元测试，选择no，next


是否安装e2e测试，选择no，next

使用npm安装以上依赖，next

点击启动按钮，可以启动项目

QQ：732005030
扫码加微信