vue.js安装小知识

Posted 2021-05-01 ICT韶关艾悉逖网络科技有限公司

安装vue-cli步骤：

1.npm install -g vue-cli //全局安装vue-cli

2.vue init webpack projectName //生成项目名为projectName的模板，这里的项目名

3.projectName //项目名称

4.cd projectName //进入项目文件

5.npm install //初始化安装依赖

注意：如果npm安装失败，直接用命令清理就行，控制台输入：

npm cache clean --force，然后重新安装。

安装成功后的目录

上述完成后，我们就完成vue的项目就已经生产完成，当我们运行localhost:8080就能看见如下图的vue官方logo：

首页

特别提醒：

在新版本的Vue开发中，通过vue-cli创建的build文件夹下面已经没有了旧版本中的dev-server.js文件，那么如果我么需要将旧项目升级需要添加一些路由设置该怎么办呢？？

答：新版本的vue已将dev-server.js与webpack.dev.conf.js合并，若要写路由相关配置需要找到webpack.dev.conf.js中的devServer对象进行相关配置。

新版本的Vue的build文件夹

进行后台数据模拟，具体步骤如下：

第一步，在const portfinder =require(‘portfinder’)后添加

1

第二步：找到devServer,在里面加上before（）方法

2

接着提供一个json.data数据

PS：

所有的修改配置都需要重新启动运行命令的：npm run dev才能生效（很重要，否则无法请求到数据）