Vue cli配置与安装

一、关于Vue cli

Vue CLI是Vue官方推出的一个脚手架客户端工具,使用它可以快速的构建一个基于Vue的单页面应用。
安装Node.js

npm -v

安装Node.js的主要目的就是为了使用npm。
npm = Node Package Manager
在使用npm之前,需要先将npm源配置为国内的某个npm源服务器:

npm config set registry https://registry.npm.taobao.org

安装Vue cli
需要安装Vue CLI以后,才可以通过它的命令来创建Vue CLI项目、启动项目等。
当安装了npm并配置npm源之后,安装Vue CLI的命令是:

npm install -g @vue/cli

安装过程中没有出现Error字样即为成功。
安装过程中出现Error字样即为失败,可以:
先通过npm config get registry检查npm源是否是:https://registry.npm.taobao.org/
重新执行以上安装Vue CLI命令
不要在Power Shell下执行命令(命令提示符前面为PS字样)
如果使用Mac OS(苹果操作系统),建议在命令前添加sudo 以使用管理员权限来执行命令
如果安装过程中卡住长时间没有反应,可以按下Ctrl + C强制终止,然后再次执行命令进行尝试。
当安装完成之后,可以使用vue -V来查看Vue CLI版本,也可以用于检验刚才的安装是否成功:

vue -V

创建Vue CLI项目
通常,应该创建某个文件夹,用于存放项目,例如在D盘下创建Vue-Workspace文件夹,然后,在命令提示符窗口中进入此文件夹:

D:
cd D:\Vue-Workspace

接下,通过vue create 项目名称命令来创建Vue CLI项目:

vue create jsd2204-csmall-web-client-teacher

注意:敲完以后命令之后只能按1下回车键,即使卡住了,也不要反复按回车!
注意:如果接下来的操作过程中选错,按下Ctrl + C强制终止,再重新创建项目。
按1下回车后,稍微等待一会,会出现创建项目时的选项,需要选择:

Manually select features
Babel
Vuex
Router
2.x

直接回车

In package.json

最后,看到Successfully created project jsd2204-csmall-web-client-teacher字样,即表示创建成功。

启动项目
通过IntelliJ IDEA打开项目,在IntelliJ IDEA的Terminal窗口中执行:

npm run serve

执行以上命令即可启动项目,启动成功后,即可看提示:

App running at:
  - Local:   http://localhost:8080/

提示:可能某些电脑上会显示多个网址,这并不重要。

打开浏览器,通过 http://localhost:8080/ 网址进行访问,即可看到默认的页面。
提示:可能某些电脑上会显示多个网址,这并不重要。

打开浏览器,通过 http://localhost:8080/ 网址进行访问,即可看到默认的页面。

关于占用端口:通过npm run serve启动的Vue CLI会默认尝试占用8080端口,如果尝试占用的端口号已经被其它进程占用,则会自动顺延一位,即尝试占用8081端口,如果仍被占用,会继续顺延……

也可以显式的指定某个端口号,在package.json中修改scripts的serve属性,例如配置为:

"serve": "vue-cli-service serve --port 8888"

则当前项目启动时会占用8888端口。
停止服务
当项目启动后,在提示了启动成功的端口窗口中,按下Ctrl + C即可停止服务。

提示:有时按下Ctrl + C后没有响应,可能反复多按几次,或按了Ctrl + C后回车。

提示:其实,只要按下了Ctrl + C,当前服务就已经停止了,后续可能出现终止批处理操作吗(Y/N)?提示,无论选择Y还是N,都无所谓。
二、 Vue CLI项目结构
package.json:相当于Maven项目中的pom.xml文件,主要配置了当前项目的依赖项,如果不太熟悉此文件,不建议手动修改
package-lock.json:此文件是自动生成的,不建议手动修改
[node_modules]:当前项目中各依赖项对应的源文件,通常,此文件夹的内容较多,且共享项目时,通常不会包含此文件夹,例如GIT仓库中的项目文件通常不包含此文件夹的内容,执行npm install命令将根据package.json下载相关的依赖项到此文件夹中
[src/views]:是建议的存放.vue视图文件的文件夹
[src/router/index.js]:是项目的路由配置文件,它配置了各路径与.vue视图组件的对应关系
public/index.html:项目中唯一的HTML文件,其内部在页面设计中添加了

标签
src/App.vue:项目中默认的视图文件,是被index.html显示的
关于.vue视图文件
是Vue CLI中用于设计页面的源文件,可以此文件中设计页面的元素、CSS样式、JavaScript。

此文件可以有3个根节点(元素):
:在其内部设计页面元素,且此节点(元素)必须有且仅有1个直接子节点(元素),通常,会在template下添加div,然后,在div内部再设计页面style:在其内部配置CSS样式
script:在其内部编写JavaScript程序
提示:根据页面设计,某些.vue文件可能没有style>,或可能没有script。
关于路由配置
在src/router/index.js中,使用了routes数组常量配置路由,主要是配置了各路径与视图组件的对应关系,所以,在数组中的各个元素值就是一个个的路由对象,每个路由对象至少要配置path和component这2个属性。

提示:在路由对象中,name属性不是必须的。

关于component属性,有2种配置方式,第1种是默认导入的,通常会在当前文件的顶部使用import语句导入并命名,然后,此component属性的值就是导入时取的名字,第2种是使用箭头函数import导入的,通常,在各项目中,只会有1个是默认导入的。

关于router-view
在.vue文件中,可以添加,此标签本身是没有显示效果的,它表示“此处将由另一个视图组件来完成显示,且,到底由哪个视图组件来显示,取决于路由配置与当前访问的URL”。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值