vue-cli脚手架开发环境搭建----helloworld

版权声明：本文为博主原创文章，喜欢的话，可以通知我后进行转载哦！ https://blog.csdn.net/maidu_xbd/article/details/87943243

vue-cli脚手架介绍：

（1）脚手架是通过webpack搭建的开发环境

（2）使用es6语法

（3）打包和压缩js为一个文件

（4）项目文件在环境中编译，而不是浏览器

（5）实现页面自动刷新

实战步骤如下：

1. 安装node,---参考https://www.cnblogs.com/zhouyu2017/p/6485265.html

2.安装全局vue-cli=====npm i vue-cli -g           查看当前版本=======vue --version

在命令行输入 npm i vue-cli -g 回车，安装全局vue-cli脚手架；在命令行输入vue --version，验证vue-cli是否安装成功，安装成功会输出安装的版本信息；

 3. 创建一个基于webpack模板的新项目=====vue init webpack helloworld

在命令行输入vue init webpack helloworld，创建名为helloworld的项目，接下来配置参照下图：

扫描二维码关注公众号，回复： 5488680 查看本文章

创建完成的项目目录如下图：

各个目录/文件说明如下：

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等，index.js中修改port配置端口号
node_modules	npm 加载的项目依赖模块，包括各种loader等
src	要开发的目录 assets: 放置一些图片，如logo等。 components: 存放组件文件，如HelloWorld.vue为当前的一个组件 App.vue: 项目入口文件 main.js: 项目的核心文件，实例化vue对象
static	静态资源目
index.html	首页入口文件
package.json	项目配置文件
README.md	项目的说明文档，markdown 格式

4. 创建完成后，按照命令窗的提示

进入hellworld目录=====cd helloworld            运行项目=====npm run dev 

回车后等待一会，直到出现以下“Your application is running here: http://localhost:8080”

5. 打开浏览器，输入 http://localhost:8080，到此vue开发环境搭建完毕，helloWorld.vue组件渲染的页面如下：