我是靠谱客的博主 拼搏刺猬,最近开发中收集的这篇文章主要介绍【Vue】快速构建一个Vue.js程序,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

CLI是构建一个快速而规范的Vue.js项目的重要工具,利用以下命令可以建立一个空项目:

先cd到项目的文件夹里
输入一行命令:

Vue init webpack [你的项目名称]

通过CLI初始化一个以Webpack为模板,项目名称为
【你的项目名称】的项目

之后会要求用户输入对应的配置项
在这里插入图片描述
接下来遵循命令通过npm安装插件

最后来看看项目:
在这里插入图片描述
使用以下命令运行该项目

npm run dev

在这里插入图片描述

提示我们项目运行在本机ip地址8080端口处
在这里插入图片描述

接下来试试Hello World(创建一个新的页面)

在文件结构里,面向开发者的文件是src
其中有三个文件夹
在这里插入图片描述
在这里插入图片描述
assets:主要用于放置静态页面中的图片或其他静态资源
components:一般的编写组件代码文件放在这里
router:放置项目中的路由

App.vue是作为入口页面的文件
main.js没有实际的业务逻辑,是为了支撑框架而存在的

创建一个新的页面有两步走:

①新建路由
②新建vue页面

默认的路由文件是:
src/router/index,js

在里面增加红框的代码:
首先是引入HelloWorld2这个组件
然后为之定义一个路由
path就是url
name是Vue.js是内部使用的名称
component是对应的.vue页面的名称

在这里插入图片描述

也就是说每当用户使用浏览器访问http://localhost:8080/#/HelloWorld2的时候,就会渲染./component/HelloWorld2.vue的文件

然后第二步创建compoment
在这里插入图片描述
如果要在vue中定义一个变量,并显示出来就得事先在data中定义

打开界面效果:
在这里插入图片描述
注意的是,和原声Vue.js不同,这里定义变量是通过Webpack的项目来写的,注意和原生Vue的区别

原生的:

new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})

可以认为原生VUE代码存在于new Vue({…})中的代码,在Webpack框架下,应该都放到export default{…}中

最后

以上就是拼搏刺猬为你收集整理的【Vue】快速构建一个Vue.js程序的全部内容,希望文章能够帮你解决【Vue】快速构建一个Vue.js程序所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(84)

评论列表共有 0 条评论

立即
投稿
返回
顶部