搭建VUE-CLI项目

Posted 吴长建

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了搭建VUE-CLI项目相关的知识,希望对你有一定的参考价值。

开发环境

1、安装Node.js:http://nodejs.cn/download/

无脑安装即可

确认nodejs安装成功:

cmd下输入 node -v 查看版本号

cmd下输入 npm -v 查看版本号

npm为软件包管理工具

2、安装Node.js淘宝镜像加速器(cnpm

可以加快下载速度

cmd下输入如下:

#-g 就是全局安装(如卡住不动尝试回车)
npm install cnpm -g

#或者使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装的位置为:C:\\Users\\Administrator\\AppData\\Roaming\\npm    (隐藏文件夹)

3、安装vue-cli

cmd下输入:

cnpm install vue-cli -g

#查看是否安装成功
vue list

创建Vue-cli程序

1、进入需要创建的相关目录下的cmd

输入如下:vue init web pack myvue

Project name myvue(vue项目名)

Author me(填作者名即可)

然后选项全选no

 

初始化

进入myvue目录的cmd

输入如下:

npm install

运行结果如果有报错的话,运行提示的下方‘npm audit fix’即可修复

npm audit fix

结果如下:

 

运行

npm run dev

在浏览器中进入http://localhost:8080/即可查看

以上是关于搭建VUE-CLI项目的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli搭建项目的目录结构及说明

使用vue-cli脚手架搭建项目,保存编译时出现的代码检查错误(ESLint)

vue-cli 快速搭建脚手架

使用vue-cli4.5.x快速搭建项目

vue-cli项目搭建及安装常规依赖

webpack5项目搭建Vue-Cli(合并配置)