vue-cli全图文搭建项目，菜鸟都能看懂的教程

如果大家觉得文章对你有所帮助，希望大家点个赞，关注一下，后续我们会更新更多优质内容，大家的支持就是我继续更新的动力。

第一步：安装node，推荐安装最新版本

直接百度搜索node，进入官网安装，推荐安装最新版本，后缀为msi的安装版，已经集成nvm，不用再次安装

我们使用npm（不理解可以百度了解）全局安装 webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。

注意：webpack 4.X 开始，需要安装webpack-cli依赖 ,所以如下图所示，执行完上面命令后会提示Do you want to install 'webpack-cli'，然后直接输入yes即可。或者使用下面这条命令：

npm install webpack webpack-cli -g

执行之后查询版本号，如果出现相应的版本号，则说明安装成功。

第二步：全局安装 vue-cli

在命令行中输入 npm install -g vue-cli，等待执行完成后检验是否安装成功，这时输入 vue -V (大写的 “V”)，如果相应的版本信息，则说明安装成功。

第三步：用vue-cli创建vue项目

在电脑中找一个地方新建一个文件夹作为项目的存放地点，比如我在F盘新建demo-vue文件夹。

然后进入到文件夹，使用命令：vue init webpack vuedemo。

下面是需要填写的信息：
? Project name vuedemo ##项目名称
? Project description it is demo ##描述，可不填
? Author maotouying ##作者
? Vue build (Use arrow keys) 
? Vue build standalone  ##运行加编译
? Install vue-router? Yes  ##安装vue-router，视情况而定
? Use ESLint to lint your code? Yes ##安装ESLint，视情况而定
? Pick an ESLint preset Standard  ##ESlint相关
? Set up unit tests Yes  ##是否安装单元测试
? Pick a test runner jest  ##测试模块
? Setup e2e tests with Nightwatch? Yes   ##e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) (Use ar
? Should we run `npm install` for you after the project has been created? (recommended) npm   ##npm包管理器

出现以上信息说明安装完成，命令行进入项目文件夹，使用命令：npm install进行初始化，如果速度比较慢，可以使用cnpm

完成之后，使用命令npm run dev启动项目；

复制以上链接，进入浏览器中显示下图表示配置成功。

以上就是全部内容，有什么问题可以互相学习交流。

• 点赞
• 收藏
• 分享
• 文章举报