欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue爬坑之路 一:简单介绍vue及使用vue-cli脚手架工具快速搭建项目

程序员文章站 2022-04-24 09:01:25
...

关于Vue.js
Vue.js是最近特别火的一个前端MVVM框架,类似于Angular,但更容易上手,而且因为作者是中国人的原因,所以Vue.js的中文文档比较齐全,很多的问题都能在官网文档中得到解决!


使用cnpm安装Vue.js
首先得下载一下npm,下载过node.js的就不用下载,没有下载的朋友可以下载一下node.js里面有集成了npm,最好到相应的目录下打开命令提示符 shift+鼠标右键选择在此处打开命令符,也可以直接先打开npm切换到对应的目录下,因为npm是外国的速度比较慢,所以还是切换回淘宝的cnpm,输入下面代码安装下cnpm:

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

安装完成后升级一下cnpm

cnpm install cnpm -g

升级完成后就可以直接使用cnpm安装vue,js

cnpm install vue

安装vue之后,在安装一下脚手架工具vue-cli

cnpm install --global vue-cli

接下来就可以使用vue-cli快速创建项目,这时候你可以先选择一下你的项目的存放目录 切换目录命令cd,之后输入vue的搭建命令:

vue init webpack "项目名称"

Vue爬坑之路 一:简单介绍vue及使用vue-cli脚手架工具快速搭建项目

输完项目后会出现一堆选项具体代表的意思是:
1:项目名称 只支持小写‘
2:项目描述 默认亦可
3:作者名称
4’:使用什么模式,默认就行
5:是否安装路由管理 是
6 :是否使用ESLint 使用的话比较规范,我这里选择不使用
7、8:是否需要测试 看个人需要


查看是否成功安装,切换到项目目录:
cd E:\编程文档\new-novel 更改成自己的项目目录,输入命令(第一个命令安装依赖项):

cnpm install 
npm run dev

Vue爬坑之路 一:简单介绍vue及使用vue-cli脚手架工具快速搭建项目
看到我的端口是8081,因为我有8080端口被占用了,默认的端口是8080,输入网址后看到下面的界面证明搭建完成
Vue爬坑之路 一:简单介绍vue及使用vue-cli脚手架工具快速搭建项目

到这里就搭建完成,下一篇文章在来介绍一下大概的目录结构以及做一个基本的登录界面,用上我之前写的一个登录接口.Net WebApi入门简单基础认识(自动生成api文档和简单测试)