vue-cli 快速构建vue项目

vue
vue算是近几年来前端非常火的技术框架。其主要核心：组件化和数据驱动。关于vue的相关知识点可参考官网 https://cn.vuejs.org/
如何快速构建vue项目显得尤为重要，很明显vue-cli 为我们提供了一个非常快捷的脚手架。现在开始快速使用vue-cli：
1、安装node.js
下载地址:https://nodejs.org/en/download/ ，选择对应版本（windows ，mac ）
成功后输入命令行 node-v

star:test test$ node -v
v8.4.0
star:test test$

2、node安装成功后，已经可以使用npm进行安装相关依赖。但是npm安装速度较慢，一般采用cnpm进行安装（说白了就是安装淘宝镜像：执行 npm install -g cnpm --registry= https://registry.npm.taobao.org 命令即可）

star:~ test$ cnpm -v
cnpm@5.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@5.6.0 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@8.4.0 (/Users/xumingxing/.nvm/versions/node/v8.4.0/bin/node)
npminstall@3.3.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/Users/xumingxing/.nvm/versions/node/v8.4.0
darwin x64 18.2.0
registry=http://registry.npm.taobao.org

3、需要全局安装webpack，安装webpack过程如下：执行npm install webpack -g，安装完成之后输入 webpack -v

star:~ test$ webpack -v
4.8.3
star:~ test$

4、最最重要的一步:
安装vue-cli脚手架构建工具，执行npm install vue-cli -g，安装成功后可使用vue -V来查看版本

前四步的准备工作做好之后，我们就可以使用vue-cli 快速构建vue项目：
执行vue init webpack demo （其中demo就是指的是你要构建的工程名称,如果是mac系统需要加上sudo vue init webpack demo）

Project name test
? Project description something to test
? Author test@163.com <test>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

vue-cli · Generated "demo".

成功构建后，会自动生成一个demo的文件夹，里面就是构建好的vue项目。文件目录如下图所示：

利用vue-cli快速构建vue项目，只要执行npm start 即可将项目跑起来。当然vue-cli构建的只是一个最基本的项目结构。如果用于正常的项目开发，还需添加更加复杂的功能。文章末尾，我也会附上我平时用于vue项目开发的demo。

demo下载地址：https://github.com/yzbyxmx/h5-vue.git