VueJs学习随笔--第一个Vue工程

安装

第一步: 安装 nodejs 环境。

第二步: 配置淘宝 npm 镜像。

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

这样就可以使用cnpm 命令来安装模块了。

安装 vue-cli

1
npm install vue-cli -g

查看vue-cli是否成功,不能检查vue-cli, 需要检查vue:

1
vue -V

创建 vue 项目

1
vue init webpack "hellovue"

还有一种创建方式:

1
vue create hellovue

然后执行 npm install, 最后启动服务:

1
npm run dev

项目结构

build 目录是一些webpack的文件,配置参数什么的,一般不用动。
config 是 vue 项目的基本配置文件。
node_modules 是项目中安装的依赖模块。
src源码文件夹,基本上文件都应该放在这里。

  • assets 资源文件夹,里面放一些静态资源。
  • components 这里放的都是各个组件文件。
  • App.vue App.vue 组件。
  • main.js 入口文件。

static 生成好的文件会放在这个目录下。
.babelrc babel 编译参数,vue 开发需要 babel 编译。
.editorconfig 看名字是编辑器配置文件,不晓得是哪款编辑器,没有使用过。
.gitignore 用来过滤一些版本控制的文件,比如 node_modules 文件夹。
index.html 主页。
package.json 项目文件,记载着一些命令和依赖还有简要的项目描述信息。

index.html

主页我们可以像平时普通的html文件一样引入文件和书写基本信息,添加meta标签等。

main.js

这里是入口文件,主要作用是初始化vue实例并使用需要的插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

App.vue

这是一个标准的vue组件,包含三个部分,一个是模板,一个是script,一个是样式,这里需要了解vue的基础。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>

<script>
export default {
name: 'App'
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

可以看到上面第 4 行使用了路由,打开 router/index.js:

router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})

这里配置了一个根路径路由 @/components/HelloWorld, 这里 @ 表示 src 的根路径。

添加新页面

创建文件 src/test.vue :

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<p> 测试我的组件 {{ hello }}</p>
</template>
<script>
export default {
name: "TestHello",
data: function(){
return {
hello: 'HelloWorld'
}
}
}
</script>

然后在 router/index.js 中注册路由:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TestHello from '@/test'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/hello',
name: 'TestHello',
component: TestHello
}
]
})

在浏览器输入 http://localhost:8080/#/hello 访问。

ESLint检测

如果我们在创建工程的时候选择了 ESLint 来检查我们的项目,那么上面的修改可能会报出很多错误来,但是不影响运行,在我们暂时不了解 ESLint 的配置前可以先关闭它。

打开 build/webpack.base.conf.js 文件,找到如下一行内容注释掉:

1
2
3
4
5
6
7
8
9
10
11
module: {
rules: [
//...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}

]
}

安装 Element 组件库

1
npm i element-ui -S

然后在 src/main.js 中配置路由:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'

Vue.config.productionTip = false
+Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

使用 Element 组件修改界面

src/test.vue 中添加显示一个 element 的 Button 组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
+ <div>
<p> 测试我的组件 {{ hello }}</p>
+ <el-button> 我的按钮 {{ hello }}</el-button>
+ </div>
</template>
<script>
export default {
name: "TestHello",
data: function(){
return {
hello: 'HelloWorld'
}
}
}
</script>

注意上面的 <template> 下只允许一个根节点,所以需要用 <div> 包裹。

组件单独引入

我们尝试将上面自己创建的 test.vue 组件,引入到 HelloWorld.vue 组件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
+import TestHello from '@/test.vue'

export default {
+ components: {
+ TestHello
+ },
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

然后在 <template> 中使用 TestHello 组件:

1
2
3
4
5
6
7
8
9
10
<template>
<div class="hello">
<h1>{{ msg }}</h1>
+ <TestHello/>
<h2>Essential Links</h2>
<ul>
<li></li>
</ul>
</div>
</template>

访问页面可以看到成功的引入了 TestHello 组件,并使用了它。

评论

3D Adapter Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout AsyncTask Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK CSS Camera Raw Canvas Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Elements Error Exception Extensions File FileProvider FileSave Flow Fresco GCC Git Git flow GitHub GitLab Github flow Gitlab flow Glide Gradle GrideView Groovy HTML HTML5 Handler HandlerThread Hexo Hilo Hybrid I/O IDEA IO ImageMagick ImageView IntelliJ Intellij Intent Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux ListView Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO Next Nodejs ObjectAnimator Okhttp Oracle VM Permission PhotoShop Physics Process Python RGB RS-232 RTU RecyclerView Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SQLite SSH SharePreference Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue CLI Vue.js Web WebGL Web前端 Workbench Zdog api apk axios background blur bookmark by关键字 cli compileOnly component computed css css3 c语言 databases demo flex flexbox flow gradient hexo hotfix html iOS icarus icarus主题 implementation init jQuery javascript launchModel linear logo merge methods mvp offset photos pug query radial rxjava2 scss servlet shell slot slot-scope svg tkinter tomcat transition unicode utf-8 v-slot vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 书籍 事件 享元模式 亮度 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 入坑 入门视频教程 全套视频教程 内存 内核 内部分享 函数 函数式编程 分支 分析 列表 创建 删除 动画 单例模式 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图形图像 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 对比度 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工作流 工具 工厂模式 年终总结 开发技巧 开发流程 异常 弱引用 思想 恒星 打包 扫盲 技巧 指令 指针 接口 插件 插值 插槽 摄影 操作系统 攻略 故事 数据存储 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 最佳实践 服务 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 混合模式 渐变 渲染 游戏 源码 源码分析 滤镜 瀑布流 灰度 热修复 版本 版本回退 版本控制 状态栏 状态模式 生活 界面 留言板 直方图 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统广播 系统概述 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 编程 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 背景 背景混合 脚手架 膨胀的宇宙 自学Android 自定义 自定义View 自定义插件 色调 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 视频教程 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 走马灯 转换 软件工程 软引用 过滤器 运算符 进程 迭代子模式 适配器 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 饱和度 高斯模糊 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×