Vue Cli创建vue.js

一、前期准备

npm集成在node.js中

https://nodejs.org/en/

附上官网链接

 

 

 

 

 

左边是LTS（长期支持）版本，右边是当前最新版，根据个人喜好选择

安装完可以执行命令查看版本号检查是否安装成功

node -v
npm -v

npm安装成功后可以安装一个淘宝镜像

因为npm安装资源来源是外网，速度会比较慢，网络不好的情况下很容易超时失败，淘宝镜像cnpm执行速度会快许多

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意：无论选择npm还是cnpm，一个项目就用到底，交替使用容易报错

接下来安装Vue Cli

Vue2安装方法

npm install -g vue-cli

Vue3安装方法

npm install -g @vue/cli

两个版本构建的项目目录建构有一定的差别

Vue3可以使用ui界面构建项目，这一篇先介绍Vue2的构建方法

二、构建Vue项目

新建一个文件夹作为项目workspace

在该位置打开命令行（最好用管理员身份）

 

 vue init webpack 项目名

这里是以webpack为模板构建项目，可以替换成其他参数，跟上我们的项目名（项目名不要出现大写字母）

 

 

 等待一段时间后按要求操作即可

（如果网络状况不佳，这一步可能会超时然后报错，解决方法见vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT）

 

 这里询问是否安装vue-router,一定要选是

 vue-router 是我们构建单页面应用的关键

 

 

 等待安装完...emm报了一堆warn，不过没有error就算成功了

如果有漏洞按照提示输入命令修复

 

 

 

 这是生成的目录结构

接下来运行项目

npm run dev

 

 

 然后我们访问localhost:8081(如果没有自己配置过 默认端口是8080)

 

 

 一个前端项目就构建完成啦