Vue.js学习第一篇

最新推荐文章于 2023-11-03 14:09:45 发布

三遍猪

最新推荐文章于 2023-11-03 14:09:45 发布

阅读量364

点赞数

分类专栏： web全栈开发文章标签： vue.js

转载请关注我的-公众号-青儿创客基地-QQ技术交流群852283276

本文链接：https://blog.csdn.net/Zhu_Zhu_2009/article/details/87895268

版权

web全栈开发专栏收录该内容

24 篇文章 1 订阅

订阅专栏

作者

QQ群：852283276
微信：arm80x86
微信公众号：青儿创客基地
B站：主页 https://space.bilibili.com/208826118

参考

《Vue.js 快速入门》
vue2.0：（三）、项目开始，首页入门（main.js，App.vue,importfrom）

Webpack Vue.js项目文件结构

项目目录

C:\dog\program\vue.js\helloworld>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 64AD-F916

 C:\dog\program\vue.js\helloworld 的目录

2019/02/23  16:53    <DIR>          .
2019/02/23  16:53    <DIR>          ..
2019/02/23  16:47               402 .babelrc
2019/02/23  16:47               147 .editorconfig
2019/02/23  16:47                51 .eslintignore
2019/02/23  16:47               791 .eslintrc.js
2019/02/23  16:47               213 .gitignore
2019/02/23  16:47               246 .postcssrc.js
2019/02/23  16:47    <DIR>          build                # 编译用到的脚本
2019/02/23  16:47    <DIR>          config               # 各种配置
2019/02/23  16:47    <DIR>          dist                 # 打包后的文件夹
2019/02/23  16:47               272 index.html           # 最外层文件
2019/02/23  16:53    <DIR>          node_modules         # node第三方安装包
2019/02/23  16:53           540,537 package-lock.json
2019/02/23  16:47             2,695 package.json         # node项目配置文件
2019/02/23  16:47               553 README.md
2019/02/23  16:47    <DIR>          src                  # 源代码
2019/02/23  16:47    <DIR>          static               # 静态文件，暂时无用
2019/02/23  16:47    <DIR>          test
              10 个文件        545,907 字节
               8 个目录 138,276,720,640 可用字节

build目录

C:\dog\program\vue.js\helloworld>dir build
 驱动器 C 中的卷没有标签。
 卷的序列号是 64AD-F916

 C:\dog\program\vue.js\helloworld\build 的目录

2019/02/23  16:47    <DIR>          .
2019/02/23  16:47    <DIR>          ..
2019/02/23  16:47             1,198 build.js               # 打包使用，不能修改
2019/02/23  16:47             1,290 check-versions.js      # 检查npm版本，不能修改
2019/02/23  16:47             6,849 logo.png
2019/02/23  16:47             2,587 utils.js               # css/sass生成，不能修改
2019/02/23  16:47               553 vue-loader.conf.js     # 重要配置文件，不能修改
2019/02/23  16:47             2,385 webpack.base.conf.js   # 基本配置文件，不能修改
2019/02/23  16:47             3,004 webpack.dev.conf.js    # 基本配置文件，不能修改
2019/02/23  16:47             5,196 webpack.prod.conf.js   # 基本配置文件，不能修改
               8 个文件         23,062 字节
               2 个目录 138,275,713,024 可用字节

config目录

 C:\dog\program\vue.js\helloworld\config 的目录

2019/02/23  16:47    <DIR>          .
2019/02/23  16:47    <DIR>          ..
2019/02/23  16:47               156 dev.env.js   # 开发模式下的配置文件，无需修改
2019/02/23  16:47             2,291 index.js     # 定义端口8080、图片目录static、开发模式下的代理服务器
2019/02/23  16:47                61 prod.env.js  # 生产模式下的配置文件，无需修改
2019/02/23  16:47               149 test.env.js
               4 个文件          2,657 字节
               2 个目录 138,275,713,024 可用字节

node_modules目录

第三方包，由npm install产生，所有package.json定义的第三方包都会被下载在这个文件夹下，

C:\dog\program\vue.js\helloworld>dir node_modules
 驱动器 C 中的卷没有标签。
 卷的序列号是 64AD-F916

 C:\dog\program\vue.js\helloworld\node_modules 的目录

2019/02/23  16:53    <DIR>          .
2019/02/23  16:53    <DIR>          ..
2019/02/23  16:53    <DIR>          .bin
2019/02/23  16:53    <DIR>          @babel
2019/02/23  16:53    <DIR>          @types
2019/02/23  16:53    <DIR>          abab
2019/02/23  16:53    <DIR>          abbrev
2019/02/23  16:53    <DIR>          accepts
2019/02/23  16:53    <DIR>          acorn
2019/02/23  16:53    <DIR>          acorn-dynamic-import
2019/02/23  16:53    <DIR>          acorn-globals
2019/02/23  16:53    <DIR>          acorn-jsx
2019/02/23  16:53    <DIR>          acorn-walk
2019/02/23  16:53    <DIR>          agent-base

src目录

核心源代码目录，

C:\dog\program\vue.js\helloworld>dir src
 驱动器 C 中的卷没有标签。
 卷的序列号是 64AD-F916

 C:\dog\program\vue.js\helloworld\src 的目录

2019/02/23  16:47    <DIR>          .
2019/02/23  16:47    <DIR>          ..
2019/02/23  16:47               374 App.vue     # 二级页面模板，其他Vue.js页面作为该模板的一部分被渲染
2019/02/23  16:47    <DIR>          assets      # 存放图片
2019/02/23  16:47    <DIR>          components  # 视图和组件
2019/02/23  16:47               360 main.js     # 无业务逻辑，支撑Vue.js框架
2019/02/23  16:47    <DIR>          router      # router/index.js定义各个页面的url
               2 个文件            734 字节
               5 个目录 138,272,542,720 可用字节

创建一个页面

首先新建路由，打开router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import SayHello from '@/components/SayHello' //缺少这句话，编译不过

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld //没有逗号
    }, //逗号隔开不同路由
    {
      path: '/sayhello', //对应一个url
      name: 'SayHello', //Vue.js内部使用名称
      component: SayHello //对应.vue页面的名字
    }  //可以也可以没有逗号
  ]
})

上一步的路由引用了component SayHello，现在新建src/component/SayHello.vue，

<template><!-- 表示HTML模板，里面是普通的HTML -->
  <div>
    <!-- Hi Vue! -->
    {{message}}
  </div>
</template>

<script><!-- 表示js代码，所有js代码都在这里，ECMAScript -->
export default {
  data () {
    return { }
  }
}
</script>

<style><!-- CSS/SCSS/SASS文件写在这里 -->
.hi {
  color: red;
  font-size: 20px;
}
</style>

现在在VSCode的终端中运行node，

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。

PS C:\dog\program\vue.js\helloworld> npm run dev

> helloworld@1.0.0 dev C:\dog\program\vue.js\helloworld
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 23/31 modules 8 active ...program\vue.js\helloworld\src\App.vue{ parser: "babylon" } is deprecated; we now trea 95% emitting
 WARNING  Compiled with 1 warnings                                                                                                                                                                                22:01:38

  ✘  http://eslint.org/docs/rules/no-undef  'SayHello' is not defined
  src\router\index.js:17:18
        component: SayHello
                    ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/no-undef

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

 WAIT  Compiling...                                                                                                                                                                                               22:01:54
 95% emitting

 WARNING  Compiled with 1 warnings                                                                                                                                                                                22:01:55

  ✘  http://eslint.org/docs/rules/no-trailing-spaces  Trailing spaces not allowed
  src\components\SayHello.vue:2:9
    <div > 
           ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/no-trailing-spaces

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.                                                                                                                                                   终止批处理操
作吗(Y/N)? n
PS C:\dog\program\vue.js\helloworld> npm run dev

> helloworld@1.0.0 dev C:\dog\program\vue.js\helloworld
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 22/32 modules 10 active ...program\vue.js\helloworld\src\App.vue{ parser: "babylon" } is deprecated; we now tr 95% emitting

 WARNING  Compiled with 1 warnings                                                                                                                                                                                22:02:24

  ✘  http://eslint.org/docs/rules/no-trailing-spaces  Trailing spaces not allowed
  src\components\SayHello.vue:2:9
    <div > 
           ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/no-trailing-spaces

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

 WAIT  Compiling...                                                                                                                                                                                               22:02:41
 95% emitting

 DONE  Compiled successfully in 895ms                                                                                                                                                                             22:02:43
 I  Your application is running here: http://localhost:8080           
PS C:\dog\program\vue.js\helloworld> npm run dev

> helloworld@1.0.0 dev C:\dog\program\vue.js\helloworld
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 22/32 modules 10 active ...program\vue.js\helloworld\src\App.vue{ parser: "babylon" } is deprecated; we now tr 95% emitting

 DONE  Compiled successfully in 14418ms                                                                                                                                                                           22:08:22
 I  Your application is running here: http://localhost:8080

第一个错误是因为没加import SayHello from '@/components/SayHello'，第二个错误是<div >的>的后面多了个空格。第一个错误会导致网页打不开，第二个不影响使用。

三遍猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习第一篇

参考《Vue.js 快速入门》Webpack Vue.js项目文件结构项目目录C:\dog\program\vue.js\helloworld&amp;amp;amp;amp;amp;gt;dir 驱动器 C 中的卷没有标签。卷的序列号是 64AD-F916 C:\dog\program\vue.js\helloworld 的目录2019/02/23 16:53 &amp;amp;amp;amp;amp;lt;DIR&amp;
复制链接

扫一扫

专栏目录