1. 创建项目时(vue create 项目名)
–弹出选择vue版本配置,vue2,3和自定义配置
babel:用来将ES6语法转换为ES5
eslint:对代码语法检查,属于webpack内容。{
let a
a = ??
} js中不允许创建let字符修饰的没有被使用的变量
启动项目:npm run serve (如果是cnpm可以替换,注意是serve不是server)
2. vue脚手架基本结构(图片为默认的vue2)
3. gitignore
==> git - ignore === git忽略
这里存放着git的忽略文件,哪些文件和文件夹不接受git管理,在这配置
4. babel.config.js
这里有babel将我们写入的ES6语法转换为ES5语法,这里不需要改动,可参考babel官网
5. package.json && package-lock.json
只要是由npm构建的项目,都有这两个文件。这里存放着项目所使用的包的名字,版本,依赖,库和常用的命令等等。。。
5.1 scripts一些常用的命令
serve 运行服务
build 构建项目(打包)
lint 运行语法检查,囊括(.html .css .js .vue)
告诉你哪里写的不对哪里写的不太好,一般打包项目前检查
5.2 package-lock.json 包版本控制软件
涉及node.js知识,为包版本管理,方便下载版本的时候,下载的版本与实际开发版本不一致,🔒死
6. README.md
这里写vue相关的笔记
接下来从npm run serve之后,按流程开始分析
1. main.js
项目执行的入口文件
2. App.vue
由template,script,style三部分组成
构建所有组件的父组件
3. assets文件夹
存放所有的静态资源,包括logo,图片,音频等,方便公共的调用
4. componens文件夹
放所有的子组件
5. public > index.html
构建html基本的信息
6.vue.config.js
(只要是修改了该文件,都需要停止程序,重新运行才会执行npm run…)
可选配置文件,用于自定义个性化定制
初始时:
脚手架文件结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
关于不同版本的Vue
- vue.js与vue.runtime.xxx.js的区别:
- vue.js是完整版的Vue,包含:核心功能 + 模板解析器。
- vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
- 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template这个配置项,需要使用render函数接收到的createElement函数去指定具体内容。
一些途中遇到的报错
1.Component name “School“ should always be multi-word vue/multi-word-component
vue不建议你直接使用School作为组件名,想让你换一个词。
解决办法,在vue.config.js文件中添加 关闭语法检查: lintOnSave: false
***本教程参考了尚硅谷vue2+vue3课程讲解***
以下内容来源于科大讯飞,星火认知模型对vue脚手架结构的讲解
Vue的脚手架是一个基于Vue.js的快速搭建项目的开发工具,它可以帮助开发者快速创建一个符合规范的项目结构。下面是对Vue脚手架的结构进行解析:
1. 配置文件(`vue.config.js`):用于自定义项目的配置选项,如代理服务器、输出目录等。
2. 入口文件(`src/main.js`):Vue实例的入口文件,用于引入其他模块和组件。
3. 组件库(`src/components`):存放项目中使用的第三方组件库。
4. 视图层(`src/views`):存放项目中的页面文件,每个页面对应一个`.vue`文件。页面之间可以通过路由进行切换。
5. API层(`src/api`):存放项目中的API接口文件,如请求数据等。可以使用axios等库来发送HTTP请求。
6. 样式文件(`src/assets/styles`):存放项目的CSS样式文件。
7. 静态资源(`public`):存放项目的静态资源,如图片、字体等。可以将这些资源放在该文件夹下,以便在开发过程中直接引用。
接下来,我们详细解析一下这些部分的具体内容:
* `vue.config.js`:用于配置项目的输出目录、代理服务器等信息。例如,可以通过设置`outputDir`属性来指定输出目录,通过设置`devServer`属性来配置开发服务器。
* `src/main.js`:Vue实例的入口文件,通常包含以下内容:
1. 引入Vue构造函数和其他依赖模块;
2. 创建Vue实例;
3. 将Vue实例挂载到DOM上;
4. 在根元素上添加事件监听器;
5. 在开发环境下,使用`webpack-dev-server`启动开发服务器。
* `src/components`:存放项目中使用的第三方组件库,可以按需引入所需的组件。
* `src/views`:存放项目中的页面文件,每个页面对应一个`.vue`文件。页面之间可以通过路由进行切换。
* `src/api`:存放项目中的API接口文件,如请求数据等。可以使用axios等库来发送HTTP请求。
* `src/assets/styles`:存放项目的CSS样式文件,可以按需引入所需的样式。
* `public`:存放项目的静态资源,如图片、字体等。可以将这些资源放在该文件夹下,以便在开发过程中直接引用。