vue项目初始化

最新推荐文章于 2024-06-28 22:18:56 发布

Yl郁

最新推荐文章于 2024-06-28 22:18:56 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/HiYulinlin/article/details/123336739

版权

一、脚手架创建项目

1、vue create 项目名

2、Manually select features ：手动选择功能

3、

(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

4、（使用vue2）

3.x
> 2.x

5、 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

6、（使用less）

Sass/SCSS (with dart-sass)
> Less
Stylus

7、（选择ESLint + Standard config）

ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
8、

(*) Lint on save
>(*) Lint and fix on commit

9、（选择 In dedicated config files 保存单独的配置文件）

In dedicated config files
In package.json

10、Save this as a preset for future projects? (y/N)n

yarn serve / npm run serve 启动项目

二、加入git版本管理

# 添加远端仓库地址
git remote add origin 你的远程仓库地址

# 推送提交
git push -u origin master

三、调整目录结构

1、删除初始化的默认文件

2、新增src/api 目录、src/utils 目录、src/styles 目录（创建index.less 文件，存储全局样式，在 main.js 中加载全局样式）

调整后的目录结构：

.                                 
├── README.md                     
├── babel.config.js               
├── package-lock.json             
├── package.json                  
├── public                        
│   ├── favicon.ico               
│   └── index.html                
└── src                           
    ├── api            // 请求方法
    ├── App.vue        // 根组件              
    ├── assets         // 静态目录             
    ├── components     // 公共组件目录            
    ├── main.js        // 入口文件            
    ├── router         // 路由配置
    ├── utils          // 工具文件
    ├── styles         // 全局样式
    ├── store          // 仓库对象            
    └── views          // 页面视图