使用Vue-cli搭建脚手架的小总结

使用Vue-cli搭建脚手架

一、使用Vue搭建项目的两种方式：

1、CDN的方式

2、使用脚手架的方式

也就是使用webpack搭建的一个开发的环境，在这个环境中，可以使用一些浏览器目前还不支持的文件转换为浏览器可以识别的ES5的语法等，可以实时的更新打包好的库，从而实现同步化。还可以将其默认的部署在本地的服务器上边，更好的实现页面的实时刷新。

二、搭建脚手架的步骤：

1、依赖node.js环境

node的版本在6.9之上，npm的环境在3.10以上

可以在命令行中输入npm -v node -v

来进行当前的版本检查

2、安装流程：

 

1、装全局的vue-cli

npm install --global vue-cli

安装完成之后可以在命令行中输入vue来进行测试，是否安装成功

在命令行中输入vue --version来进行读取我们安装的vue-cli的版本

• 创建一个基于webpack木板的新的项目

• 安装依赖npm

2、创建一个基于webpack模板的新项目

首先向进入我们想要安装vue-cli的项目的目录之下

vue init webpack 自己的项目名称

点击回车之后，就会将当前我们的项目的模板下载下来

这个时候回出现一些选项进项当前项目的配置

回车进行默认

 

3、cd到我们的文件夹下，使用npm install来安装项目中所依赖的模块

 

 

4、这是后打开我们的项目文件夹就会看到我们已经配置好的我们的项目文件

 

5、最后在命令行中将我们的项目启动起来

这个一定要是在我们新建的项目里边进行设置，不然会报错。

npm run dev

这时候会向我们将已经启动起来的项目所对应的端口号显示出来，我们就可以通过端口号在浏览器上边直接进行访问我们的项目了。