vue-cli的安装及使用

时间：2022-03-02 22:02:18

一、    node 和npm

1、在安装vue-cli前，要确认自己的电脑是否安装了node和npm

2、查询版本如下（vue脚手架支持node@4.xx以上）

　　node -v    查询node版本

npm  -v    查询npm版本

二、全局安装vue-cli

1、安装命令

npm install -g vue-cli    // -g是安装到全局

2、安装后可终端输入vue回车查看  vue对应命令，如下

vue-cli的安装及使用

三、初始化项目

1、命令如下

vue init webpack yyb    //yyb是项目名

2、等模板下载成功后，或有一个交互式的选项选择，根据选择内容填写和回车就好

3、初始化完成后，会提示开启脚手架的命令，如下

vue-cli的安装及使用

4、cd  yyb   为进入项目文件夹，然后npm  run  dev启动脚手架

5、启动成功会显示如下

vue-cli的安装及使用

提示  运行脚手架   打开http://localhost:8081即可

6、运行成功如下

vue-cli的安装及使用

好，到这步vue-cli的安装和运行就完成了

四、脚手架的目录文件

vue-cli的安装及使用

1、目录介绍

build/          // 项目构建(webpack)相关代码

    build.js       // 生产环境构建代码

    check-versions.js // 检查node&npm等版本
　　logo.png           //vue logo

    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公共组件


    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// 项目说明

相关文章