Vue的demo-踩坑

转自博客园：如何搭建一个vue项目。

一、安装node环境

1.下载地址为：https://nodejs.org/en/

2.检查是否安装成功：如果输出版本号，说明我们安装node环境成功

 node -vnpm -v

3.为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/

输入：

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

即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

检查是否安装成功：

 cnpm -v

二、搭建vue项目环境
　1.全局安装vue-cli

 npm install --global vue-cli

可能会安装不上，用下面的命令安装

 npm i -g @vue/cli-init

2.进入你的项目目录，创建一个基于 webpack 模板的新项目

 vue init webpack vue-demo

说明：
　Vue build ==> 打包方式，回车即可；
　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到所以Y 回车；
　Use ESLint to lint your code ==> 是否需要 js 语法检测目前我们不需要所以 n 回车；
　Set up unit tests ==> 是否安装单元测试工具目前我们不需要所以 n 回车；
　Setup e2e tests with Nightwatch ==> 是否需要端到端测试工具目前我们不需要所以 n 回车；

3.进入项目：cd vue-demo，安装依赖

安装成功后，项目文件夹中会多出一个目录：　node_modules

4.启动项目

 npm run dev

项目启动成功：

访问：http://localhost:8080/#/
　　

三、Vue项目目录讲解

1、build：构建脚本目录

build.js ==> 生产环境构建脚本；
check-versions.js ==> 检查npm，node.js版本；
utils.js ==> 构建相关工具方法；
vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
webpack.base.conf.js ==> webpack基本配置；
webpack.dev.conf.js ==> webpack开发环境配置；
webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

dev.env.js ==> 开发环境变量；
index.js ==> 项目配置文件；
prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
components：组件目录，我们写的组件就放在这个目录里面；
router：前端路由，我们需要配置的路由路径写在index.js里面；
App.vue：根组件；
main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建。

6、index.html：首页入口文件，可以添加一些 meta 信息等。

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息。

8、README.md：项目的说明文档，markdown 格式。

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等。

四、开始第一个vue项目

ps：注意部分参数后、方法后、冒号后需跟空格。部分报错是没有加空格导致。

1、在components目录下新建一个views目录，里面写我们的vue组件First.vue。

在First.vue中：

<!--template 写 html，template下只能有一个div，其他是在div里面 -->
<template><div class="first-app">{{msg}}</div>
</template><!-- script写 js -->
<script>export default {name: "First",data() {return{msg: "Welcome to FirstApp"}}}
</script><!-- style写样式 -->
<style>
</style>

在router->index.js中配置路由路径：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入First组件
import First from '../components/views/First'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},// 配置First的路由{path: '/first',name: 'First',component: First}]
})

访问：http://localhost:8080/#/first

2.组件引用

①.在components目录下新建sub文件夹，用于存放一下可以复用的子组件。比如新建一个Confirm.vue组件。

<template><div>{{msg}}</div>
</template><script>export default {data () {return{msg: "Welcome to ConfirmApp"}}}
</script><style>
</style>

②.在父组件中引入子组件
在First.vue中

<!--template 写 html -->
<template><div class="first-app">{{msg}}<Confirm></Confirm></div>
</template><!-- script写 js -->
<script>// 引入 Confirm组件import Confirm from '../sub/Confirm'export default {name: "First",data () {return {msg: "Welcome to FirstApp"}},// 注册Confirmcomponents: {Confirm}}
</script><!-- style写样式 -->
<style>
</style>

页面中调用了Confirm.vue组件

3.父子组件通信
父组件：First.vue
子组件：Confirm.vue

Confirm.vue

<template><div class="Confirm-app">{{msg}}<button @click="getButtonClick">{{text}}</button></div>
</template><script>export default {name: 'Confirm-app',// props 父组件传递给子组件的值props:['text'],data () {return{msg: "Welcome to ConfirmApp"}},methods: {getButtonClick() {// 触发当前实例上的事件。附加参数都会传给监听器回调。 // 向父组件传递对象msg的值this.$emit('message',this.msg);}}}
</script><style>
</style>

First.vue

<!--template 写 html -->
<template><div class="first-app">{{msg}}<Confirm text="注册" @message="getMessage"></Confirm></div>
</template><!-- script写 js -->
<script>// 引入 Confirm组件import Confirm from '../sub/Confirm'export default {name: "First",data () {return {msg: "Welcome to FirstApp"}},// 注册Confirmcomponents: {Confirm},methods: {// val由子组件传递给父组件的值getMessage(val){alert(val);}}}
</script><!-- style写样式 -->
<style>
</style>

再次访问：http://localhost:8080/#/first
点击【注册】，提示获取到子组件Confirm.vue的msg值。
可以看见按钮的值是First.vue组件中text的值：

<Confirm text="注册" @message="getMessage"></Confirm>

4.使用路由搭建单页应用。
①.在views文件夹创建Second.vue组件；

<template><div>Welcome to SecondApp<br /><p><router-link to="/first">去第一个页面</router-link></p></div>
</template><script>
</script><style>
</style>

②.在router->index.js中引入Second组件并配置路由；

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入First组件
import First from '../components/views/First'// 引入Second组件
import Second from '../components/views/Second'
Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},// 配置First的路由{path: '/first',name: 'First',component: First},// 配置Second的路由{path: '/second',name: 'Second',component: Second}]
})

③.在First.vue组件的div中添加跳转页面的代码。

 <p><router-link to="/second">去第二个页面</router-link></p>

点击【去第二个页面】，跳转：

----- End -----

扩展：
Vue官方地址：https://router.vuejs.org/zh-cn/

Git地址：https://github.com/123ac/Vue-demo

Vue的demo-踩坑相关推荐

H5跳转微信小程序-成功案例（VUE）（踩坑无数）
这里写自定义目录标题准备工作根据官方提供的资料需准备以下几点: 1.已认证的服务号 2.绑定JS接口安全域名 (在微信公众平台设置) 3.IP白名单 (在微信公众平台设置) 4.将小程序和H5公众 ...
Vue Element-ui上传图片踩坑
Element-ui上传图片踩坑使用Element-ui组件上传图片时,使用自带的action发起上传请求时碰到400错误错误代码 <el-uploadclass="upload- ...
vue使用mintUI踩坑——不显示样式/导入mui.css报错/build不了
vue-cli3.x之mint-ui按需引入按需引入借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的. 首先,安装 babel-plugin- ...
如何使用sublime3愉快的编写vue项目（踩坑总结）
前段时间开始编写一个vue项目,因为发现很多人使用sublime编辑器,所以我也选择使用sublime,但是使用的过程并不顺利,出现了一些问题,在网上查了很多资料,自己调试了很多次总算弄好了,记录下来 ...
vue的路由踩坑坑……之路（＜router-link/＞，＜router-view/＞）之router-link跳转时浏览器的路径是正确的，而router-view却不渲染数据？？？
为什么我的router-link跳转时浏览器的路径是正确的,而router-view却--为什么不渲染数据???这个问题我纠结了好几个小时..到最后,真真真--(无语子) 先上图,看目录: 我的目录长 ...
Idea运行支付宝网站支付demo踩坑解决及其测试注意事项
一.前言在一些商城网上中,必不可少的是支付,支付宝和微信比较常见,最近小编也是在研究这一块,看看支付宝怎么进行支付的,支付宝给我们提供了demo和沙箱测试.减少我们的申请的麻烦,公钥和秘钥也比之前方 ...
vue创建项目踩坑记录 443 ECONNRESET
安装nodejs 并创建vue 项目的记录首先安装nodejs 是傻瓜式操作,配置环境变量的可以参考这个博文: 点击跳转安装教程查看node版本和npm 版本使用淘宝镜像cnpm 第二步项目初始 ...
Vue+axios配置踩坑记录
避免误导,先上亲测可用的代码: /*** Axios封装*./src/axios/index.js **/ import axios from 'axios' import { Notice,Mess ...
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
weex-eros+vue Android拍照并预览图片踩坑【小白向】
[TOC] 最近做一个移动端的手机拍照预览,碰了不少墙,但还是遇到好心人帮助,成功预览.感谢"小豬仔"~ 开干之前,请先阅读 Weex-Eros文档和 Vue教程 Windows ...

Vue的demo-踩坑

Vue的demo-踩坑相关推荐

最新文章

热门文章