安装
npm install -g @vue/cli
创建项目
vue create 项目名
选择预设环境
使用键盘的上下键进行选择,enter键确定
- 默认情况下是default(bable eslint)
bable:下一代JavaScript编译器,将es6语法编译为es5语法
eslint:规范代码行为,可组装的JavaScript和jsx检查工具
- 可点击第二个,进行自主选择
键盘上下键选择,空格选中
- 创建的项目各个文件
node_modules 依赖包
public 静态资源文件夹
favicon.ico 项目小图标
index.html 项目入口页面的模板
src 项目的源文件夹(存放的是需要webpack打包的文件)
.browserslistrc 里面所配置的是浏览器的兼容配置
.editorconfig 编辑器的配置规则
.eslintrc.js eslint的配置文件
babel.config.js babel的配置文件
postcss.config.js post的配置文件
- 项目的启动
开发 npm run serve
生产 npm run build
lint npm run lint
目前脚手架将webpack配置都给集成进去,若需要配置可以通过配置vue.config.js的方式来修改
- 首先找项目中的main.js文件
其中的$mount 是一个实例方法,能够在实例化vue对象之后,再挂载到页面上
render函数与template类似--HTML模板,h('div',['hellow',h('h1','我是h1标签')])相当于创建一个dom节点,在h里面加入第二个参数{}可以添加类名和样式
export default 表示es6中的暴露