Vue.js系列之入门手册整理
文章目录
- 第一章、环境搭建
- 1.1、准备:
- 1.2、nodejs安装
- 1.3、npm安装
- 1.4、vue安装
- 第二章、目录结构
- 2.1、webpack
- 2.2、webpack下的全局文件结构
- 第三章、Vue调试
- 3.1、下载工程
- 3.2、安装cnpm支持
- 3.3、构建devtools
- 3.4、devtools常用问题
- 第四章、定义页面
- 4.1、创建页面
- 4.2、定义路由
- 附录资料
第一章、环境搭建
1.1、准备:
npm: 6.9.0 (npm > 3.0)
node: v10.15.3 (node > 6.11.5)
vue: 2.0+
1.2、nodejs安装
window系统可以直接去官网下载:https://nodejs.org/en/
1.3、npm安装
查看npm版本
npm -v
升级npm
cnpm install npm -g
升级或安装cnpm
npm install cnpm -g
国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像
npm install cnpm -g --registry=https://registry.npm.taobao.org
1.4、vue安装
安装vue,-g 表示给他们安装成全局可以使用的包。
cnpm install vue vue-cli -g
运行vue
创建一个基于 webpack 模板的新项目my-project:
vue init webpack my-project
安装依赖
cd my-project
cnpm install
以默认端口来运行:
npm run dev
安装成功之后,访问:
http://localhost:8080
第二章、目录结构
2.1、webpack
webpack简介,webpack是一个前端资源加载/打包工具,将各种js/css/html代码最后打包编译到一起。vuejs已经集成
2.2、webpack下的全局文件结构
目录/文件 | 说明 |
---|---|
build/ | 编译构建用到的脚本 |
config/ | 各种配置文件 |
dist/ | 打包后的文件夹 |
node_modules/ | node的第三方包 |
src/ | 源代码 |
static/ | 静态资源文件 |
test/ | 测试目录 |
index.html | 最外层文件 |
package.json | node项目配置json |
README.md | markdown的说明文档 |
build
build/build.jscheck-versions.jsdev-client.jsdev-server.jsutils.jsvue-loader.conf.jswebpack.base.conf.jswebpack.dev.conf.jswebpack.prod.conf.js
- build.js
打包构建使用,不能随意修改
- check-version.js
检测npm的版本,不能随意修改
- dev-client.js和dev-server.js
服务器脚本,不能随意修改(PS:借助于nodejs,$npm run dev 就可以打开一个server,运行vuejs)
- units.js
css/sass 等文件的生成工具脚本,不能随意修改
- vue-loader.conf.js
用于辅助加载vuejs用到的css source map等内容
- webpack.base.conf.js
一些基础的配置文件,不能随意修改
- webpack.dev.conf.js
开发模式的基础配置文件,不能随意修改
- webpack.prod.conf.js
生产模式的基础配置文件,不能随意修改
config
config/dev.env.jsindex.jsprod.env.js
- index.js
定义了 开发时的端口(默认是8080),定义了图片文件夹(默认static), 定义了开发模式下的 代理服务器
- dev.env.js
开发环境模式的配置文件
- prod.env.js
生产环境模式的配置文件
dist
打包之后的文件所在目录
node_modules
node项目需要的第三方库
src
源代码的文件夹
▾ src/▾ assets/logo.png▾ components/HelloWorld.vue▾ router/index.jsApp.vuemain.js
- assets: 存放图片的文件夹
- components: 用到的"视图"和"组件"所在的文件夹。
- router/index.js 路由文件。 定义了各个页面对应的url.
- App.vue 如果index.html 是一级页面模板的话,这个App.vue就是二级页面模板。 所有的其他vuejs页面,都作为该模板的 一部分被渲染出来。
- main.js 废代码。没有实际意义,但是为了支撑整个vuejs框架,存在很必要。
第三章、Vue调试
VueJs有提供调试Vue devtools工程,集成到Chrome插件
3.1、下载工程
git clone https://github.com/vuejs/vue-devtools
3.2、安装cnpm支持
在vue-devtools文件夹安装cnpm支持
cd vue-devtools //跳转到vue-devtools文件夹
cnpm install //安装cnpm环境支持,也可以npm install
3.3、构建devtools
npm run build
编译成功之后,就选择chrome的添加拓展程序,选择开发者模式,选择vue-devtools\shells\chrome文件夹,就可以将编译好的chrome插件引到chrome里
比较顺利的是直接安装就可以按F12调试了,如果有遇到下列问题,可以参考我的解决方法:
3.4、devtools常用问题
npm run build报错
编译devtools工程出现报错:
...@ D:/VueJs/vue-devtools/src/devtools/components/StateInspector.vue@ D:/VueJs/vue-devtools/node_modules/_buble-loader@0.5.1@buble-loader??ref--0!D
:/VueJs/vue-devtools/node_modules/_vue-loader@15.7.0@vue-loader/lib??vue-loader-
options!D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexStateInspector.vue?vue
&type=script&lang=js&@ D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexStateInspector.vue?vue&type
=script&lang=js&@ D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexStateInspector.vue@ D:/VueJs/vue-devtools/node_modules/_buble-loader@0.5.1@buble-loader??ref--0!D
:/VueJs/vue-devtools/node_modules/_vue-loader@15.7.0@vue-loader/lib??vue-loader-
options!D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexTab.vue?vue&type=scrip
t&lang=js&@ D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexTab.vue?vue&type=script&lan
g=js&@ D:/VueJs/vue-devtools/src/devtools/views/vuex/VuexTab.vue@ D:/VueJs/vue-devtools/src/devtools/router.js@ D:/VueJs/vue-devtools/src/devtools/index.js@ ./src/devtools.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! vue-devtools@5.0.0-beta.4 build: `cd shells/chrome && cross-env NODE_EN
V=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the vue-devtools@5.0.0-beta.4 build script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-03-17T1
4_26_16_300Z-debug.log
新代码用的webpack4,node版本至少大于6.11.5,有遇到如上类似错误的,要检查你安装的nodejs版本,最新版的devtools要求node版本至少大于6.11.5,解决方法就是重新安装nodejs
安装之后vue图标不显示
修改配置,改为TRUE,使vue插件在chrome里可以看到
修改:vue-devtools\shells\chrome\manifest.json
如果devtools插件还是不起效,可以在vue-devtools\shells\chrome\webpack.config.js加上
if (process.env.NODE_ENV ==‘production’)
{
module.exports.plugins = [
‘process.env’:{
NODE_ENV:’“development”’
}
]
}
const path = require('path')
const createConfig = require('../createConfig')module.exports = createConfig({entry: {hook: './src/hook.js',devtools: './src/devtools.js',background: './src/background.js','devtools-background': './src/devtools-background.js',backend: './src/backend.js',proxy: './src/proxy.js',detector: './src/detector.js'},output: {path: path.join(__dirname, 'build'),filename: '[name].js'},devtool: process.env.NODE_ENV !== 'production'? '#inline-source-map': false
})
if (process.env.NODE_ENV =='production')
{module.exports.plugins = ['process.env':{NODE_ENV:'"development"'} ]
}
上面问题解决了,就可以按f12调试了
第四章、定义页面
创建一个Vue页面需要两个步骤:
- 创建页面
- 定义路由
4.1、创建页面
创建一个TestVue.vue命名的页面
components/TestVue.vue
<template><div >Hi Vue!</div>
</template><script>
export default {data () {return { }}
}
</script><style>
</style>
4.2、定义路由
修改路由脚本,加上页面路由信息
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TestVue from '@/components/TestVue'Vue.use(Router)
export const constantRouterMap = [{path: '/',name: 'HelloWorld',component: HelloWorld
}, {path: '/TestVue',name: 'TestVue',component: TestVue
}]
export default new Router({routes: constantRouterMap
})
访问页面
http://localhost:8080/#/TestVue
附录资料
VueJS教程:
- VueJS Gitbook教程:http://vue_book.siwei.me/
- VueJS官网手册:https://cn.vuejs.org/v2/guide/
- VueJS系列博客:https://segmentfault.com/u/ihuangmx/articles?page=1
- VueJS runoob教程:http://www.runoob.com/vue2/vue-tutorial.html
Vue.js系列之入门手册整理相关推荐
- 2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
- Vue.js 2.0 参考手册.CHM下载
下载地址 Vue.js 2.0 参考手册.CHM下载链接: http://pan.baidu.com/s/1kVbhd4b 密码: wxfh 转载于:https://www.cnblogs.com/n ...
- vue.js的快速入门使用
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angula ...
- 1. vue.js的快速入门使用
1. vue.js的快速入门使用1.1 vue.js库的下载1.2 vue.js库的基本使用1.3 vue.js的M-V-VM思想1.4 显示数据2. 常用指令2.1 操作属性2.2 事件绑定例如:完 ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
- Vue.js系列之vue-router(下)(5)
说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区 ...
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- Vue.js 系列教程 4:Vuex
原文:intro-to-vue-4-vuex 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理.这个系列教程 ...
- Vue.js 框架从入门到精通,只需要它!
点击蓝字 关注我们 你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
最新文章
- ACM JAVA大数
- android 8.0 移除静态注册广播
- linux之使用indent格式化代码总结
- matlab 读取照片imread,利用matlab读取图像
- 全网沸腾!鸿蒙手机要来了
- linux 中开机启动过程简单
- 超码、候选码、主码 与 外码
- 信捷PLC Modbus通讯 (Modbus_TCP与Modbus_RTU)
- S7-PLCSIM Advance ,解决 Error Code: -30,LicenseNotFound问题解决和期限21天限制的问题,对版本V1.0 V2.0 V3.0有效
- 沈善增谈学太极的经历
- 古建筑灯光秀投影设计应该注意哪些细节呢?
- 微信小程序--map组件视图无法更新的问题
- UE4制作插件的插件神器pluginCreator
- 《JAVA设计模式系列》责任链模式
- 每日加瓦,终成栋房5-正则表达式
- JOBDU-OJ 1456 胜利大逃亡
- 计算机网络管理系统及应用论文,计算机网络管理技术及其应用论文
- android校准电池,为什么电池校准不适用于Android智能手机
- [MM32生态]EVB-L0136开发学习分享
- 廖雪峰python视频教程-福利 | 廖雪峰官方Python教程,拿走不谢!
热门文章
- Unity3D加载火炬之光资源(3Dmax带动画)
- 误码性能测试基础知识
- nyoj-17 单调递增最长子序列(灵活应对)
- 软件测试周刊(第56期):新年的目的并非是拥有新的一年,而是拥有一个新的灵魂。 ​​​
- Win10系统Mail添加QQ邮箱
- HTML框架代码全集
- Data Guard ORA-16825、ORA-16661解决一例
- STM32F103 PB3 PB4 设置成普通GPIO的配置
- IP 转换为实际地址 《一》
- 随机密码生成。编写程序,在26个字母大小写和9个数字组成的列表中随机生成10个8位密码