Vue创建脚手架项目

vue脚手架创建项目

要使用Vue脚手架创建一个新的项目，请按照以下步骤操作：

1. 确保你已经安装了Node.js和npm。

2. 安装Vue CLI（Vue的官方命令行工具）：

npm install -g @vue/cli

3. 如果你还没有安装Vue脚手架的插件，可以通过以下命令安装：

vue add @vue/cli-plugin-babel
vue add @vue/cli-plugin-router
vue add @vue/cli-plugin-vuex
vue add @vue/cli-plugin-eslint

这里我已经安装完了 从创建项目开始演示
打开vscode终端（ctrl + ~）直接输入以下命令
我这里创建到C盘上了，你可以切换到别的盘符

4. 创建一个新的Vue项目：

PS C:\Users\Administrator> vue create my-firstproject

此时屏幕会显示

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

选择你要创建vue2或者vue3项目，这里我选的是vue2（键盘上下按键就可以选择,完毕后按回车）
此时屏幕会显示一些信息等待即可
当屏幕出现以下信息代表成功创建项目
5. 进入项目目录：（按照提示输入相应的命令即可）

PS C:\Users\Administrator> cd my-firstproject

6.启动项目：

npm run serve

等待即可
页面会出现

以上步骤会创建一个新的Vue项目，并启动一个开发服务器，你可以在浏览器中访问 http://localhost:8080 来查看你的新Vue应用。
项目创建完毕
找到你刚刚创建好的项目直接拖到vscode里面即可

脚手架结构详解

1. .gitignore 这里存放着git的忽略文件，哪些文件和文件夹不接受git管理，在这配置
2. babel.config.js 这里有babel将我们写入的ES6语法转换为ES5语法
3. package.json && package-lock.json
   只要是由npm构建的项目，都有这两个文件。这里存放着项目所使用的包的名字，版本，依赖，库和常用的命令
   
   其中scripts一些常用的命令

serve 运行服务
build 构建项目（打包）
lint 运行语法检查，囊括（.html .css .js .vue）
​ 告诉你哪里写的不对哪里写的不太好，一般打包项目前检查

4. package-lock.json 包版本控制软件
   涉及node.js知识，为包版本管理，方便下载版本的时候，下载的版本与实际开发版本不一致，锁住

接下来从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 只要是修改了该文件，都需要停止程序，重新运行
   关于不同版本的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:存放项目的静态资源，如图片、字体等。可以将这些资源放在该文件夹下，以便在开发过程中直接引用。

————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_36920766/article/details/131148947