什么是vue-cli？
想明确了解建议官网查看详情或出门右转百度左转谷歌也行
只要知道它是开发的工具简化了配置webpack创建Vue项目的过程
安装
npm install -q @vue/cli
使用
vue create 项目名称
选择预设会有三个选项
Default ([Vue 2] babel, eslint) //vue2 及两个插件
Default (Vue 3) ([Vue 3] babel, eslint) //vue3 及两个插件
Manually select features //自定义
选择自定义后
会有更多选项出来
(*) Choose Vue version //必装 下一步将会选择Vue版本
(*) Babel //必装 处理高级语法
( ) TypeScript //微软脚本语言没学过不懂日后再说
( ) Progressive Web App (PWA) Support //什么什么框架不懂先不管
( ) Router //路由
( ) Vuex
(*) CSS Pre-processors //less
( ) Linter / Formatter //先别选就完事了
( ) Unit Testing
( ) E2E Testing
利用空格选择 有*表示已选中
选择完毕后Enter即可
此时先不要选择Linter
日后学明白再看
//没有跟注释的我也不知道干啥的我才刚学 日后在补充
选择完版本 选less (淦我还没学过
下一步选择第一个 意思是将配置的文件独立或放在package.json
接着会选择是否保存这个配置 选择y后面会让你起一个名字 选择n 就会开始创建
随后提示切换目录然后run起来
run serve 和 webpack dev 一个道理
可在package.json查看
开发完后不在用serve 换成 build
认识结构目录
node_modules //第三方包
public //存放网站图标和index页面
src //项目源代码
x配置文件
x配置文件
x配置文件 等等不再赘述
src 详细目录
assets //图片css等静态资源
components //封装的组件 默认有个文件可删除
App.vue //项目根组件
main.js //项目入口文件整个项目的运行要先执行main.js
项目运行流程
在工程化的项目中Vue 通过 main.js 吧 App.vue 渲染到index.html 的指定区域中
1.App.vue用来编写待渲染的模板结构
2.index.html中需啊哟预留一个 el 区域
3.main.js 把App.vue 渲染到了 index.html 所预留的区域中
//导入vue这个包 得到 Vue构造函数
import Vue from 'vue'
//导入App.vue 根组件 把App.vue中的模板结构渲染到 HTML 页面中
import App from './App.vue'
Vue.config.productionTip = false
//创建 Vue 的实例对象
new Vue({
//把render 函数指定的组件，渲染到HTML页面中
render: h => h(App),
}).$mount('#app') //相当于 el:'' 这样显得逼格高组件
把页面上可重用的UI结构封装为组件,从而方便项目的开发维护
vue是一个支持组件化开发的前端框架
组件的后缀名是.vue 上文App.vue就是一个组件
组件的组成部分
- template 组件的模板结构
- script 组件的JavaScript行为
- style 组件的样式
<template>
<!-- 此处仅允许有一个根元素 在这一个div里可嵌套更多个 -->
<div class="user">
<h1>这是我想说的:{{ usersay }}</h1>
</div>
</template>
<script>
//默认导出 固定写法
export default {
//data数据源 但此处必须是函数
data() {
//此处 return 里定义数据
return {
usersay: "Hello Word",
};
},
};
</script>
<style>
.user {
background-color: skyblue;
}
</style>定义methods等 像以往一样 和data平级即可
methods:{},
watch:{},侦听器
computed:{},计算属性
filters:{},过滤器
都是当前组件的
style默认为css语法
只需 <style lang='less'>即可