vue学习-vue-cli4创建项目与目录结构简介

vue学习-vue-cli4创建项目与目录结构简介

---

目录

---

---

内容

---

1、vue cli 4创建项目

1.1、版本简介

	版本	简介
@vue/cli	4.4.6	vue脚手架，搭建vue项目
vue	2.6.11	vue框架核心

1.2、创建项目

1. 命令行或者git bash切换至需要创建项目的目录，以本人使用目录为例：E:\phpstudy_pro\WWW\dev\webplace\project

2. 执行创建项目命令：

    vue create 项目名称
   

3. 手动配置选项：
   

4. 选择项目所需依赖（组件)
   

   • 依赖简介

       这里的话按住空格就是选择，全选的话就是按住a
       ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
       \>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
       ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
       ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
       ( ) Router // vue-router（vue路由）
       ( ) Vuex // vuex（vue的状态管理模式）
       ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
       ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
       ( ) Unit Testing // 单元测试（unit tests）
       ( ) E2E Testing // e2e（end to end） 测试
     

   • 说明

     • 可以根据 需要选择初始依赖，也可后面添加

5. 选择是否使用history router模式
   

  Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。 我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。 选yes的话需要服务器那边再进行设置。 Use history mode for router? (Requires proper server setup for index fallback in production)

6. 选择css 预处理器
   

  新创建的.vue文件，默认sass ,我们一般选择如图选项，可以后面自己更改。

7. 选择如何存放配置
   

  选项一：配置文件单独存放；选项二：统一存放在package.json文件中。这里我们一般选择单独生成配置文件。

8. 选择是否保存当前的配置
   

  是否把当前创建选项保存为一个预置文件（模板文件），用于将来创建新项目。一般选择否，会根据项目不同，选择不同选项。

9. 等待项目初始化完成
   

10. 创建成功，访问
    

    • 访问方式一：如图所示
    • 访问方式二：图像界面方式

      • 命令

          vue ui
        

      • 图示：

2、项目结构简介

• 图示2-1：
• node_modules:第三方依赖
• public:公共资源
• src:源码
  • assets：静态资源，css、img、js、font等
  • compoments：组件，一般自定义组件
  • router：路由配置
  • views：视图组件
• App.vue：首页组件（默认组件）
• main.js：入口文件
• .browserslistrc：配置使用CSS兼容性插件的使用范围
• .eslintrc.js：配置ESLint
• .gitignore：配置git忽略的文件或者文件夹
• babel.config.js：使用一些预设
• package.json：项目描述既依赖
• package-lock.json：版本管理使用的文件
• README.md：项目描述

后记 ：

  本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue-leyou
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA