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的项目,接下来配置参照下图:
创建完成的项目目录如下图:
各个目录/文件说明如下:
目录/文件 |
说明 |
build |
项目构建(webpack)相关代码 |
config |
配置目录,包括端口号等,index.js中修改port配置端口号 |
node_modules |
npm 加载的项目依赖模块,包括各种loader等 |
src |
要开发的目录
|
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组件渲染的页面如下: