vue-cli 搭建 vue 项目以及目录结构含义

115 阅读 0 评论 76 点赞

我是靠谱客的博主犹豫魔镜，这篇文章主要介绍vue-cli 搭建 vue 项目以及目录结构含义，现在分享给大家，希望可以做个参考。

官网： https://cli.vuejs.org/guide/

相比上一篇文章的webpack，脚手架显得更加方便。

vue-ceate慢的解决方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 使用淘宝源
npm config set registry https://registry.npm.taobao.org

# 修改
vim  C:Userszhou.vuerc

```
{
  "useTaobaoRegistry": true,
  "latestVersion": "4.5.12",
  "lastChecked": 1616378716209
}
```

（1）安装webpack和vue-cli

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cnpm install webpack -g

##
cnpm install -g @vue/cli

# 安装 axios
cnpm install axios -g

## 本项目安装
cnpm install axios --save


# 查看vue-cli的版本
vue -V

# 或者
vue --verison

如果提示： 'vue' 不是内部或外部命令，也不是可运行的程序

复制代码

1
npm config list

找到prefix 的路径，然后加到环境变量

复制代码

1
prefix = "D:\Program Files\nodejs\node_global"

(2) 初始化项目

进入想要放置项目的文件夹：

复制代码

1
vue create hello

安装插件

复制代码

1
npm install --save axios

（3）启动

复制代码

1
npm run dev

（4）目录结构以及含义

复制代码

build/          // 项目构建(webpack)相关代码 
    build.js       // 生产环境构建代码
    check-versions.js     // 检查node&npm等版本
    utils.js              // 构建配置公用工具
    vue-loader.conf.js     // vue加载器
    webpack.base.conf.js     // webpack基础环境配置
    webpack.dev.conf.js     //  webpack开发环境配置
    webpack.prod.conf.js     // webpack生产环境配置
config/         // 项目开发环境配置相关代码   
    dev.env.js  // 开发环境变量（看词明意）
    index.js     //项目一些配置变量
    prod.env.js // 生产环境变量
    test.env.js                  // 测试环境变量
    
dist/      //npm run build打包后生成的文件夹
node_modules/
    ...     // 项目依赖的模块 
src/            // 源码目录       
    assets/         // 资源目录 
        logo.png
    components/         // vue组件
        Head.vue
        Footer.vue
    pages (或views)/    //视图
        login/
            Index.vue
        list/
            Foods.vue
            
    router/             // 前端路由
        index.js        // 路由配置文件
    store/                          // vuex的状态管理
    App.vue    // 页面入口文件（根组件）
    main.js    // 程序入口文件（入口js文件）    
static         // 静态文件，比如一些图片，json数据等
    .gitkeep    //这个里面的gitkeep是这个目录为空，也可以把这个目录提交的git仓库里面，因为通常一个空目录是不能提交git仓库里面的
    
.babelrc        // ES6语法编译配置
.editorconfig    // 定义代码格式
.gitignore        // git上传需要忽略的文件格式
index.html        // 入口页面
package.json        // 项目基本信息
README.md        // 项目说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
build/          // 项目构建(webpack)相关代码 
    build.js       // 生产环境构建代码
    check-versions.js     // 检查node&npm等版本
    utils.js              // 构建配置公用工具
    vue-loader.conf.js     // vue加载器
    webpack.base.conf.js     // webpack基础环境配置
    webpack.dev.conf.js     //  webpack开发环境配置
    webpack.prod.conf.js     // webpack生产环境配置
config/         // 项目开发环境配置相关代码   
    dev.env.js  // 开发环境变量（看词明意）
    index.js     //项目一些配置变量
    prod.env.js // 生产环境变量
    test.env.js                  // 测试环境变量
    
dist/      //npm run build打包后生成的文件夹
node_modules/
    ...     // 项目依赖的模块 
src/            // 源码目录       
    assets/         // 资源目录 
        logo.png
    components/         // vue组件
        Head.vue
        Footer.vue
    pages (或views)/    //视图
        login/
            Index.vue
        list/
            Foods.vue
            
    router/             // 前端路由
        index.js        // 路由配置文件
    store/                          // vuex的状态管理
    App.vue    // 页面入口文件（根组件）
    main.js    // 程序入口文件（入口js文件）    
static         // 静态文件，比如一些图片，json数据等
    .gitkeep    //这个里面的gitkeep是这个目录为空，也可以把这个目录提交的git仓库里面，因为通常一个空目录是不能提交git仓库里面的
    
.babelrc        // ES6语法编译配置
.editorconfig    // 定义代码格式
.gitignore        // git上传需要忽略的文件格式
index.html        // 入口页面
package.json        // 项目基本信息
README.md        // 项目说明