初始化一个vue项目
1.安装node
端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(需要用管理员权限cmd)。
2.查看node的版本号
下载好node之后(默认安装即可自动配置好环境变量),以管理员身份打开cmd管理工具,输入 node -v
,回车,查看node版本号,出现版本号则说明安装成功。
3.安装淘宝npm镜像
由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm
镜像来安装vue.
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。
输入命令:npm install -g cnpm -registry=https://registry.npm.taobao.org
4.安装全局vue-cli脚手架
淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架.
输入命令:cnpm install --global vue-cli
回车;
验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;
输入命令:cnpm install --global vue-cli
5.建一个新项目
搭建完手脚架之后,我们要开始建一个新项目,这个时候我建议,尽量不要装在C盘,因为vue下载下来的文件比较大,如果要改盘的话,直接输入D:回车就可以直接改盘
输入命令:vue init webpack my-project-first
回车,my-project-first
是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route
,
这个我们在项目要用到,所以就输入y
回车
6.注意
下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no
,后面的都可以直接输入no
,都是我们暂时用不到的
打开D盘查看一下,会发现多了一个刚刚创建的文件夹
7.进入项目文件夹
文件夹已经下载好了,现在就可以进入文件夹,输入:cd my-project-first
回车进入新建的项目。
8.在项目里安装依赖
因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,在项目里输入以下命令。
输入命令:npm install
实在安装慢不得已可以使用cnpm install
注意:cnpm
有可能发生未知的错误,请尽量使用:npm install
9.运行
一切环境依赖安装准备就绪,我们来测试一下自己新建的vue项目的运行情况,输入命令:npm run dev
直接回车。
会弹出一个浏览器访问地址默认为localhost:8080
注意:run dev
只是vue中package.json
的打包方式,初始化项目默认是run dev
后期打包项目可以自定义设置 ,run build
同理
10.访问验证
8080
是默认的端口,要访问的话,直接在浏览器输入localhost:8080
就可以打开默认的模板了;到此为止,vue开发环境搭建完毕。
最后如何修改默认的端口?
我们可以看到初始化的根目录下有一个config
文件夹,看名字就知道与配置有关,打开config
目录下的index.js
,可以修改host
和port
,这里不仅可以改变ip和端口,还可以根据需要修改其他配置信息。
以上是 初始化一个vue项目 的全部内容, 来源链接: utcz.com/z/378736.html