搭建vue框架

202 阅读2分钟

1.先安装node.js 去官网:Node.js,下载node.js

6D3A5@8`{}A$2ZU05}6BJ56.png

推荐下载左边的,稳定

安装成功以后,打开命令窗口,输入node -v出现版本号则代表安装成功 1.png

再输入npm -v查看npm命令是不是安装成功,出现版本号则代表成功

2.png

2.由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

使用npm命令安装:npm install -g cnpm --registry=registry.npm.taobao.org

  1. 安装vue-cli脚手架

使用命令:cnpm install --global vue-cli,如果这个命令报错可换成:npm install --global vue-cli

//global 表示全局安装,否则会安装到你当前的目录,使用上有限制

4.安装成功以后,在本地磁盘选择一个磁盘,然后创建一个文件夹用来存放即将创建的Vue项目,然后在命令窗口切换到该目录下。

4.1开始创建vue项目,使用命令:vue init webpack 项目名

3.png

这时候会提示你输入项目名,它会把你刚才创建的名字给你写出来,在<>内,如果项目名跟你想要的一样,直接回车即可,不一致自己输入。

注意:项目名称不能输入大写字母,不然提示错误,得小写的

4.2会问你这是一个Vue项目吗,直接回车即可

5 (2).png

4.3下面就是输入作者

5 (1).png

4.4输入完作者以后,会弹出来一堆build的提示,不用管,直接回车即可,回车以后如下:

6.png

4.5下面提示是否安装路由,输入y安装

7.png

4.6是否使用ESLint检测你的代码,输入n

8.png

4.7是否安装测试,这个看个人,我这里就选择n

9.png

4.8是否需要安装自动化测试,这个也是看个人,我输入n

10.png

4.9.提示项目创建以后,会自动运行npm install安装一些东西,直接同意就是了,等待时间比较长

11.png

5.启动项目,cnpm run dev

代表启动成功,浏览器访问http://localhost:8080/#/