vue学习-vue-cli4创建项目与目录结构简介
目录
内容
1、vue cli 4创建项目
1.1、版本简介
版本 | 简介 | |
---|---|---|
@vue/cli | 4.4.6 | vue脚手架,搭建vue项目 |
vue | 2.6.11 | vue框架核心 |
1.2、创建项目
-
命令行或者git bash切换至需要创建项目的目录,以本人使用目录为例:E:\phpstudy_pro\WWW\dev\webplace\project
-
执行创建项目命令:
vue create 项目名称
-
手动配置选项:
-
选择项目所需依赖(组件)
-
依赖简介
这里的话按住空格就是选择,全选的话就是按住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) 测试
-
说明
- 可以根据 需要选择初始依赖,也可后面添加
-
-
选择是否使用history router模式
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)。 我这里建议选n。这样打包出来丢到服务器上可以直接使用了,后期要用的话,也可以自己再开起来。 选yes的话需要服务器那边再进行设置。 Use history mode for router? (Requires proper server setup for index fallback in production)
- 选择css 预处理器
新创建的.vue文件,默认sass ,我们一般选择如图选项,可以后面自己更改。
- 选择如何存放配置
选项一:配置文件单独存放;选项二:统一存放在package.json文件中。这里我们一般选择单独生成配置文件。
- 选择是否保存当前的配置
是否把当前创建选项保存为一个预置文件(模板文件),用于将来创建新项目。一般选择否,会根据项目不同,选择不同选项。
-
等待项目初始化完成
-
创建成功,访问
- 访问方式一:如图所示
- 访问方式二:图像界面方式
-
命令
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