vue项目实战(一)之vue-cli脚手架搭建项目_vue脚手架搭建项目-程序员宅基地

技术标签: vue-client  Vue  vue  

首先假如你已经安装了node和npm,如果没有的话自己百度安装一下。

如果感觉npm下载速度慢,可以使用淘宝镜像cnpm,链接地址:

http://npm.taobao.org/

安装cnpm

方式一:

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

方式二:

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

1、安装脚手架工具vue-cli

打开cmd或者 git bash,输入以下命令全局安装vue-cli

cnpm install --global vue-cli

2、创建初始化vue项目

cd命令进入自己要创建项目的目录或者直接在那个目录shift+鼠标右键->在此处打开命令行窗口或者git bash here,然后输入初始化项目命令:

vue init webpack yv-pai

然后会出现一些选项让你选择,如图:

enter image description here

Project name 项目名开始我们可以直接回车,下面进行选择:

  • Install vue-router 安装vue-router路由插件-->选择y
  • Use ESLint to lint your code? 使用ESLint进行代码检查-->选择n
  • Set up unit tests 设置单元测试 -->选择n
  • Set up e2e tests with Nightwatch? 使用Nightwatch设置端对端测试-->选择n
  • Should we run 'npm install' for you after the project has been created? 你的项目创建之后进行安装吗?-->回车

安装完成之后,通过cd命令进入到项目目录

 cd yv-pai/

项目的目录结果如下:

enter image description here

然后运行项目

npm run dev

启动完成之后会显示访问地址,我这里是

http://localhost:8081

访问之后出现如下欢迎界面表示启动成功!

enter image description here

3、vue项目编程软件

我这里使用的是sublime软件进行vue项目的开发,大家也可以选择自己喜欢的IDE进行开发。

打开项目后目录结构介绍如下:

enter image description here

4、vue初始化项目流程介绍

1.首先是index.html入口页面

enter image description here

这里的div标签的id是app

2.然后在页面入口js文件main.js中实例化vue,挂载到id为app的div上,并引入组件App,使用模板App,这样App组件就被挂载到了id为app的div上了,即挂载到了index.html中

enter image description here

3.打开初始化的vue组件App.vue,它里面包含了template模板、script脚本和style样式,每个组件都基本由这三个部分组成,在template模板中引入了vue的logo图标,下面的 <router-view/>就是由路由产生的内容会显示在这里

enter image description here

4.打开router/index.js路由js文件,首先引入相关依赖和组件

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入路由vue-router
import HelloWorld from '@/components/HelloWorld' //引入HelloWorld组件

通过Vue.use(Router)来使用路由

在规则routes里面定义了访问"/"路径时会跳转到HelloWorld组件,因此会将HelloWorld组件的内容显示在<router-view/>内

enter image description here

5.打开components/HelloWorld.vue组件,会发现这里就是我们访问的网页显示的内容

enter image description here

关于vue的其他功能以后章节将会逐一介绍。

访问我的达人课

访问我的博客 Wang's Blog

关注我的微信公众号获取更多资源

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/abcwanglinyong/article/details/83104939

智能推荐

maven 依赖_complile test runtime provided-程序员宅基地

文章浏览阅读360次。依赖 dependency除了包含,groupId,artifactId,version等基本元素外,还会包含一些其他的元素。[html] view plain copy dependency> groupId>groupId> artifactId>artifactId> version>ve_complile test runtime provided

表单提交后禁用按钮_按钮点击之后禁用成功提交后再可用-程序员宅基地

文章浏览阅读1.8k次。head>meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>title>表单提交后按钮禁用title>script type="text/javascript">function sub() {document.forms[0].elements[0].disabled =true;//docume_按钮点击之后禁用成功提交后再可用

input输入手机号增加空格_html实现手机号空格的css-程序员宅基地

文章浏览阅读3.5k次。input输入手机号增加空格,点击按钮获取手机号时去掉空格。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;input输入手机号增加空格&lt;/title&gt;&lt;meta name="viewp_html实现手机号空格的css

20-springCloud-day01-程序员宅基地

文章浏览阅读241次。一. 初识SpringCloud1.1 初识微服架构微服务架构:"微服务”一词源于 Martin Fowler的名为 Microservices的博文,可以在他的官方博客上找到http://martinfowler.com/articles/microservices.html微服务是系统架构上的一种设计风格,它的主旨是将一个原本独立的系统拆分成多个小型服务,这些小型服务都在各自独立的进程中运行,服务之间一般通过 HTTP 的 RESTfuLAPI 进行通信协作。被拆分成的每一个小型服

C语言实现斗地主游戏-程序员宅基地

文章浏览阅读1.6k次。我们先来实现主函数部分:#include <windows.h>#include <stdio.h>#include <conio.h>#include <string.h>#include <dos.h>#include <math.h>#include <time.h>#include <stdlib.h>#define CLS system("cls")#define PUS sy

WIN10 注册表添加启动项_添加的开机启动项列表-程序员宅基地

文章浏览阅读3.2k次。1、打开运行,输入“regedit”,打开注册表。2、在注册表中找到如下位置\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run,右键“Run”新建一个字符串类型的键值。3、右键新建的键值,选择“修改”,将数值名称改为 你要启动的程序名称如:XXX.exe,数值数据改为 程序所在位置的路径 如:C:\windows\system32\XXX.exe (直接不能修改名字的,可以先点击重命名,改好名字,再点击修改,修改数值数据_添加的开机启动项列表

随便推点

pcl 加载 .ply文件失败_ply三角化模型读取失败-程序员宅基地

文章浏览阅读735次。直接 make 编译时Segmentation fault (core dumped)cmake 时指定 release 模式,即cmake -DCMAKE_BUILD_TYPE=Release ..出现警告,但还是失败。无奈只能换成.pcd 文件。..._ply三角化模型读取失败

[loj#121][线段树分治][并查集]动态图连通性_动态增减的图 连通性 site:csdn.net-程序员宅基地

文章浏览阅读418次。Description动态加边删边维护图连通性n&lt;=5000,m&lt;=500000允许离线题解wori这种模板都不会写了吗…预处理每条边在什么时候出现什么时候消失根据时间建线段树线段树每个节点开一个vector存在他管理这段时间里一直存在的边把边一开始插入就可以知道这个线段树长什么样了然后开始线段树分治,dfs这棵线段树进去的时候就把边全部插入出来就全部删除..._动态增减的图 连通性 site:csdn.net

如何在 Flink 1.9 中使用 Hive?_flink1.9 kafka写入hive-程序员宅基地

文章浏览阅读154次。Flink on Hive 介绍SQL 是大数据领域中的重要应用场景,为了完善 Flink 的生态,发掘 Flink 在批处理方面的潜力,我们决定增强 FlinkSQL 的功能,从而让用户能够通过 Flink 完成更多的任务。Hive 是大数据领域最早出现的 SQL 引擎,发展至今有着丰富的功能和广泛的用户基础。之后出现的 SQL 引擎,如 Spark SQL、Impala 等,都在一定程..._flink1.9 kafka写入hive

灰狼算法(GWO)优化长短期记忆神经网络的数据回归预测,GWO-LSTM回归预测,多输入单输出模型_matlab实现gwo-lstm灰狼算法优化长短期记忆网络多输入单输出-程序员宅基地

文章浏览阅读241次。灰狼算法(GWO)优化长短期记忆神经网络的数据回归预测,GWO-LSTM回归预测,多输入单输出模型_matlab实现gwo-lstm灰狼算法优化长短期记忆网络多输入单输出

CSS 使用动画—— @keyframes 规则和 animation 规则_设定一个元素按规定的动画执行,你需要运用什么规则?-程序员宅基地

文章浏览阅读1.5w次,点赞27次,收藏90次。目录动画@keyframes规则浏览器支持CSS3动画属性CSS3动画什么是CSS3中的动画实例动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。@keyframes规则@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改..._设定一个元素按规定的动画执行,你需要运用什么规则?

『2021最新』Android Studio 个人配置,提高生产率必备篇_android studio settings 2021版本常用配置-程序员宅基地

文章浏览阅读1k次。『2021最新』Android Studio 个人配置,提高生产率必备篇_android studio settings 2021版本常用配置

推荐文章

热门文章

相关标签