第四篇:Vue的项目开发
安装Vue的脚手架cli环境
1)官网下载并安装node,附带npm
https://nodejs.org/zh-cn/
node环境:
可以解释执行js语言
提供了npm应用商城,可以为node环境安装其他插件
提供了socket,可以提供npm命令来启动socket
2)换源:将npm欢迎为cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
3)安装vue脚手架
cnpm install -g @vue/cli
注:如果第二三步异常,基本都是由网络导致的,可以重新执行第二三步,如果一直有问题,可以清理缓存后重复
npm cache clean --force
创建项目
在终端中创建项目
# cmd
cd Desktop # 前往目标路径
vue create v-proj # 创建项目名为v-proj
选择自定义安装:
Manually select features
分别勾选以下插件:
Babel:将ES6语法解析为ES5语法给浏览器
Router:前台路由
Vuex:前台仓库,相当于单例,完成个组件间传参的
之后都是大Y走下去,注意,如果有洁癖,最后一步询问是否保存配置,选择N
项目移植
1)拷贝出环境 node_modules 以外的文件与文件夹到目标文件夹
2)终端进入目标文件夹所在位置
3)执行:npm install
重新构建依赖(npm可以用cnpm替换)
Pycharm配置并启动vue项目
- 用pycharm打开vue项目
- 添加配置npm启动
Vue项目目录结构分析
├── v-proj
| ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件(项目的入口)
| | ├── router
| | | └── index.js// 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
| | └── store
| | | └── index.js// 仓库脚本文件(vuex插件的配置文件,数据仓库)
| ├── README.md
└ └── package.json等配置文件
Vue组件
1)一个.vue文件就是一个组件
2)组件都是由三部分组成:html结构、js逻辑、css样式
html结构都是在template标签中,页面结构有且只有一个根标签(template一级结构下)
js逻辑都是在script标签中,必须设置导出,export default {...}
css样式都是在style标签中,必须设置scoped属性,是样式组件化
注:pycharm安装vue.js插件,就可以高亮显示vue文件了
<template>
<div class="first-cp">
<h1>第一个组件</h1>
</div>
</template>
<script>
// .vue文件类似于模块,可以直接相互导入,所以在组件内部要设置导出
export default {
}
</script>
<style scoped>
/* scoped可以使样式组件化,只在自己内部起作用 */
</style>
全局脚本文件main.js
1)main.js是项目的入口文件
2)new Vue()就是创建根组件,用render读取一个.vue文件,$mount渲染替换index.html中的占位
3)项目所依赖的环境,比如:vue环境、路由环境、仓库环境、第三方环境、自定义环境都是在main.js中完成
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
改写为下面的这样,其实,上面的就是由下面格式演变而来:
比如说下面vue中的el选择器同等于上面的.$mount('#app'),选中的是index.html中的app。
上面是单个router其实就是下面的router: router简写的。(js中如果属性名和变量名相等可以简写)
上面的箭头函数等同于下面的function函数。
一般我们是将App.vue替换index.html中的占位,但可以自己定义,例如下面的替换成了FirstCP.vue
一般情况下,此文件我们不需要做出改动,保持默认即可,使用上面默认即可,不需要进行下面的修改,下面的修改只是为了更好地理解上面的代码。
import Vue from 'vue' // 加载vue环境
import App from './App.vue' // 加载根组件
import router from './router' // 加载路由环境
import store from './store' // 加载数据仓库环境
Vue.config.productionTip = false; // tip小提示
import FirstCP from './views/FirstCP'
new Vue({
el: '#app',
router: router,
store: store,
render: function (readVueFn) {
return readVueFn(FirstCP); // 读取FirstCP.vue替换index.html中的占位
}
});
Vue的根组件
1)App.vue是项目的根组件,是唯一由main.js加载渲染的组件,就是替换index.html页面中的<div id="app"></div>
的占位标签
2)实际开发中App.vue文件中,只需要书写下方五行代码即可(可以额外增加其他代码)
3)router-view是一个占位标签,由router插件控制,可以在router的配置文件中进行配置
4)router-view就是根据router在index.js中配置的路由关系被 指定路径 匹配 指定页面组件 渲染
5)router-view或被不同的页面组件替换,就形成了页面跳转
<template>
<div id="app">
<!-- 前台路由占位标签,末尾的/代表单标签的结束 -->
<router-view /> <!--此处会被vue组件替换并渲染,具体被谁替换,由router控制-->
</div>
</template>
<style>
body {
margin: 0;
}
</style>
Vue的路由配置router
router目录下的index.js是Vue的路由系统,他控制着Vue的根组件中的<router-view />
具体被哪个组件替换并渲染
路由配置:
1)当用户在浏览器中访问的路由是/
,router插件就会加载 Home.vue
文件,同理 /about
就是 About.vu
e文件
2)将加载的 Home.vue
文件 或者 About.vue
文件,去替换App.vue文件中的 <router-view />
占位符
3)用redirect配置来实现路由的重定向
import Vue from 'vue'
import VueRouter from 'vue-router'
// import 别名 from '文件'
import Home from '../views/Home'
import About from '../views/About'
import First from '../views/FirstCP'
Vue.use(VueRouter);
// 路由配置
// 1)当用户在浏览器中访问的路由是 / ,router插件就会加载 Home.vue文件,同理 /about 就是 About.vue文件
// 2)将加载的 Home.vue文件 或者 About.vue文件,去替换App.vue文件中的 <router-view />占位符
// 3)用redirect配置来实现路由的重定向
const routes = [
{
path: '/',
name: 'Home', // 类似反向解析的名字,可以利用属性指令在前台使用 :to='{name: 路由名}' eg:<router-link :to="{name: 'First'}">第一页</router-link>
component: Home // 注册组件
},
{
path: '/home',
redirect: '/', // 路由的重定向
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/first',
name: 'First',
component: First
}
];
const router = new VueRouter({
mode: 'history', // 此处控制是否开启历史功能,可以返回上一个页面
base: process.env.BASE_URL,
routes
});
export default router
Vue中components目录下的小组件
此目录下写的小组件,主要用于被组件使用,例如页面的导航栏可能好几个页面都需要一样的导航栏,那么就可以直接将小的组件拿过去使用;
其实Vue的组件本质上也是很多小组件渲染而成的,例如下面的components目录下的Nav.vue被引用到组件中的例子:
子组件代码示例:
<template>
<div class="nav">
<img src="" />
<ul>
<li>
<!-- router控制的路由,不是用a标签完成跳转:
1)a标签会刷新页面,错误的
2)router-link标签也能完成跳转,且不会刷新页面,就是router提供的a标签(最终会被解析为a标签,还是用a来控制样式)
3)router-link标签的to属性控制跳转路径,由两种方式
i) to="路径字符串"
ii :to="{name: '路由名'}"
-->
<a href="/">主页</a>
</li>
<li>
<router-link to="/about">关于页</router-link>
</li>
<li>
<!-- to="字符串",v-bind:to="变量",可以简写为 :to="变量" -->
<router-link :to="{name: 'First'}">第一页</router-link>
</li>
</ul>
</div>
</template>
<style scoped>
.nav {
width: 100%;
height: 80px;
background: rgba(0, 0, 0, 0.3);
}
img {
width: 200px;
height: 80px;
background: tan;
float: left;
}
ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
height: 80px;
background: pink;
}
ul li {
float: left;
height: 80px;
padding: 30px 20px 0;
}
a {
color: black;
}
</style>
父组件代码示例:
<template>
<div class="home">
<!-- vue项目下的html是支持大小写,且区分大小写 -->
<Nav />
</div>
</template>
<script>
// 父组件加载子组件:父组件通常是页面组件,是被一个个小组件这些子组件组装成的页面
// 1)导入语法要在 export default{} 之上完成
// 2)@符合标识 项目src文件夹 绝对路径
// 3)要在export default{} 的括号中用 components 注册
// 4)在该组件的模板中就可以渲染子组件了(html代码中是区别大小写的)
import Nav from '@/components/Nav'
export default {
components: {
Nav,
}
}
</script>
<style scoped>
.home {
width: 100vw;
height: 100vh;
background-color: orange;
}
</style>
第四篇:Vue的项目开发的更多相关文章
- Vue.之.项目开发工具选用
Vue.之.项目开发工具选用 上篇文章记录了创建项目,这篇文件记录,如何对创建的项目进行开发.这里选择一个工具:Visual Studio Code (请自行下载安装) 1. 打开VSCode工具,并 ...
- Vue 实战项目开发流程
一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...
- Eclipse插件开发 学习笔记 PDF 第一篇到第四篇 免分下载 开发基础 核心技术 高级进阶 综合实例
<<Eclipse插件开发 学习笔记>>,本书由浅入深.有重点.有针对性地介绍了Eclipse插件开发技术,全书分为4篇共24章.第一篇介绍Eclipse平台界面开发的基础知识 ...
- Vue.js 项目开发学习路线图
1. 思维导图 源文件:Vue路线图.xmind 参考文献 [1]. VueJs2.0建议学习路线 - lavyun - 博客园 [2]. Vue学习路线图 - 个人文章 - SegmentFault ...
- springboot第四篇:debug模式开发运用
前提:项目是以maven project结构建立的,现状是无法进行断点调试的.怎么才能在eclipse里进行调试呢? 需要:①将项目打包部署到tomcat ②往项目加入dynamic web modu ...
- vue + yarn 项目开发 (一)
1.打开src文件夹中的main.js文件,添加引用element ui框架 import ElementUI from 'element-ui' import 'element-ui/lib/the ...
- vue.js项目开发实战笔记001——准备工作
1,Vue.js 是一套构建用户界面的渐进式框架. 2,Vue.js 是由尤雨溪开发出的,最早发布于2014年2月. 3,引用vue.js地址一CDN: <script src="ht ...
- 第四篇T语言实例开发,自动加血
游戏自动加血 基础知识复习 通过前面的学习了解以下内容: TC软件的基本使用 TC的基础语法 变量与常量 功能的使用 流程语句的使用 线程的基本使用 TC控件的基本使用 热键和按钮的事件功能 控件的数 ...
- 译 PrestaShop开发者指南 第四篇 深入PrestaShop核心开发
## 访问数据库 ### 数据库结构 PrestaShop的数据库表默认带有ps_的前缀,前缀在安装时可以自定义. 所有表名都是小写,以下划线分割.当一个表表示要在两个实体间建立连接时,表名中两个实体 ...
随机推荐
- Codeforces 1304E. 1-Trees and Queries
简述题意,给你一课最小支撑树,对每个询问,在原有的路径上增加x-y,问a-b是否有路径长度为k的路,每条路每个点可以重复使用 由于是最小支撑树,我们可以用LCA来快速判断每个点之间的距离,那么现在就要 ...
- centos6.5安装图形操作界面
yum -y install xorg-x11-fonts-Type1 #安装Xwindow yum -y groupinstall "X Window System" #安装GN ...
- python中if语句和循环语句
//2019.12.05 python循环控制结构(一)控制循环结构 1-1 程序的判断语句与组合1.对于python的控制结构主要有以下三大类:(1)分支结构(2)循环结构(3)异常处理 2.pyt ...
- 【剑指Offer面试编程题】题目1518:反转链表--九度OJ
题目描述: 输入一个链表,反转链表后,输出链表的所有元素. (hint : 请务必使用链表) 输入: 输入可能包含多个测试样例,输入以EOF结束. 对于每个测试案例,输入的第一行为一个整数n(0< ...
- Liunx 如何查看80端口被哪个程序所占用
场景:启服务时一直报80端口被占用 解决方: 1.首先查看下 80 端口的使用情况 netstat -anp|grep 80 查看80端口被被占用的PID 2.根据这个PID 来查看被哪个程序在使用 ...
- [Codeforces #615 div3]1294E Obtain a Permutation
Before the Beginniing 本文为 Clouder 原创文章,原文链接为Click,转载时请将本段放在文章开头显眼处.如进行了二次创作,请明确标明. 由本人转载于博客园. 题意分析 C ...
- Django 3.0中不推荐使用的及已经删除的功能
3.0中不推荐使用的功能 django.utils.encoding.force_text()和smart_text()的别名被弃用.如果您的代码支持Python 2,smart_str()并且 fo ...
- Redis详解(一)——RDB
Redis详解(一)--RDB 前言 由于 Redis 是一个内存数据库,所谓内存数据库,就是将数据库中的内容保存在内存中,这与传统的MySQL,Oracle等关系型数据库直接将内容保存到硬盘中相比, ...
- C语言学习从入门到精通书籍,10万读者都认可
C语言程序设计从入门到精通 10万读者认可的编程图书精粹 零基础自学编程的入门图书 详解C语言编程思想和核心技术 很多初学者,对C语言.c++的概念都是模糊不清的,C语言.c++是什么,能做什么,学的 ...
- C++ Primer Plus 6 笔记(3)
第5章 1.cout在显示bool值之前将它们转换为int,但cout.setf(ios:: boolalpha)函数调用设置了一个标记,该标记命令cout显示true和false,而不是1和0 2. ...