什么是Vue-cli
Vue-cli是Vue的脚手架工具,能够帮助我们写好Vue基础代码的工具,它能够帮助我们搞定目录结构,本地调试,代
码部署,热加载,单元测试等工作。
vue-cli使用的webpack是2.0版本Vue-cli是Vue的脚手架工具,能够帮助我们写好Vue基础代码的工具,它能够帮助我们搞定目录结构,本地调试,代
码部署,热加载,单元测试等工作。
vue-cli使用的webpack是2.0版本
安装:
前置条件:
node版本在4以上,npm版本在3以上
1,安装vue-cli:npm install vue-cli -g
vue -V 查看是否安装成功
2,初始化项目:vue init webpack 你的项目名称
3,进入项目目录:cd 你的项目目录
4,安装项目依赖:npm install
5,在localhost启动测试服务器:npm run dev
6,生成上线目录(部署):npm run build
目录介绍:
build webpack配置相关
config webpack配置相关(生产环境和开发环境)
node_moules 通过npm install 安装的依赖代码库
src 项目源码(我们开发的所有代码都会放在src目录下)
static 放第三方静态资源的
.gitkeep 提交git(空文件夹是不能提交到git的,所以添加了一个.gitkeep文件)
.babelrc ES6转ES5配置文件
.editorconfig 编辑器的配置
.eslintignore 代码风格检测配置(忽略build和config文件夹下的js文件)
.eslintrc.js 代码风格检查配置
.gitignore 忽略掉提交到git的文件
index.html 入口文件
css和js是会动态插入到这个页面的
main.js js入口文件
App.vue 整站的实例文件(可以看成是本项目的大组件或根组件)
组件分为三个部分:template,script,style
package.json 整个项目的描述及插件
编写组件步骤:
首先创建一个.vue文件,.vue文件里面包含三部分, template、javascript,style,然后使用export default导
出一个对象,供其他组件使用。App.vue要用hello.vue组件,那么首先需要import进来,然后通过components注册,才
能在App.vue里面使用
用法及注意事项:
export default是什么?
使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上
手,未必愿意阅读文档,去了解模块有哪些属性和方法。为了给用户提供方便,让他们不用阅读文档就能加载模块,就
要用到export default命令,为模块指定默认输出。