北京网站建设公司知乎,深圳企业黄页,用php做网站的开发工具,网站小图片素材本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。 文章目录 一、准备工作#xff1a;安装node.js二、项目搭建创建项目目录全局安装vue-cli使用Webpack初始化项目启动项目学会… 本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。 文章目录 一、准备工作安装node.js二、项目搭建创建项目目录全局安装vue-cli使用Webpack初始化项目启动项目学会如何修改页面内容网页内容是如何展示出来的方法一搜索关键内容方法二看目录 一、准备工作安装node.js
Windows系统的node.js安装十分简易没有环境安装经验的伙伴可以参考文章Windows系统下安装node.js
二、项目搭建
创建项目目录
我们需要先创建一个用于放置项目文件的目录之后该项目相关的命令操作都需要在该路径下执行。我们新建一个hellovue的目录然后进入到该目录命令行路径提示如下C:\hellovue
全局安装vue-cli
运行命令npm install --global vue-cli安装完毕后运行命令vue -V验证安装情况如果输出版本号则说明安装成狗
使用Webpack初始化项目
Webpack是一个模块打包器。 它的主要目标是将 JavaScript 文件打包在一起打包后的文件用于在浏览器中使用。 vue-cli可以使用webpack模板对项目进行初始化即生成webpack模板的项目初始代码文件。 可以运行命令vue init webpack hellovue 然后根据提示填写项目基本信息以及相关工具配置。
各个选项的含义如下
选项意思建议Project name项目名称起一个你喜欢的项目名称即可Proiect description项目描述描述一下项目是什么应用即可练手项目可以直接默认回车Author作者练手项目写自己即可业务项目写团队名或具体成员名称Vue build项目构建模式回车选择默认方式即可Install vue-router项目是否安装vue路由选择yesUse ESLint to lint your code是否选择ESLint开发验证功能建议选择No否则可能因为格式检查报错导致代码无法运行Set up unit tests是否开启单元测试选择yes项目后期越写越完善肯定需要测试来保证功能和效率Pick a test runner选择测试方式默认Jtest即可Setup e2e tests with Nightwatch是否开启e2e测试建议选择noShould we runnpm install for you after the project has been created项目初始化后是否选择指定的包管理工具自动下载项目所需要的包建议选择 Yes.use NPM
启动项目
初始化结束之后会有如下输出 上面的输出已经提示我们如果我们要启动项目需要运行两个命令
cd hellovue进到我们刚才新建并且初始化的子项目中npm run devdev模式运行项目开发模式用于开发者开发和测试
运行后会有如下提示 根据输出我们的项目已经运行起来了浏览器访问http://localhost:8080即可以到看到了。于是 我们浏览器访问指定地址后可以看到如下页面
学会如何修改页面内容
网页内容是如何展示出来的
我们要修改网页内容就要知道网页内容是如何展示出来的。
首先用你喜欢的编辑器打开项目我个人偏爱并强推VS Code可以看到如下右侧项目代码文件结构
如果过了解过网页开发的基础知识会知道我们看到的网页都是html然后通过css和js在html上添加样式以及交互效果。所以我们可以点开项目根目录的index.html看到代码内容如下 index.html内容中的title与我们看到的页面tab名称是对应的说明我们看到的确实是这个html里面的内容。但是body标签中并没有内容那么我们在页面上看到的vue图片、文字和链接是哪来的呢
这里提两种探索的方法
方法一搜索关键内容 我们看到页面有三个文本所以我们可以直接用IDE搜索这三条文本所在位置如下 我们尝试修改一下找到的HelloWolrd.vue中的Welcom to Your Vue.js App改成Hello Vue World!并保存然后刷新浏览器查看页面是否发生变化可以看到页面如下 页面内容确实跟预期一样发生了变化。再去看HelloWorld.vue文件中的其他内容可以看到浏览器页面里展示的其他内容也都在这个代码文件中。
所以我们可以确定如果我们想修改页面内容只需要修改HelloWorld.vue即可
同样地当我们想进一步去探索vue是如何知道要把HelloWorld.vue的内容渲染到浏览器页面上的我们就可以搜索HelloWorld.vue看哪里用到了这个文件。由于HelloWorld.vue搜索结果为空于是我们改成搜索HelloWorld搜索结果如下
我们可以看到这是在一个router目录下index.js文件中根据名称可以知道router控制路由即浏览器地址到代码文件的对应, index.js是入口文件。代码中写明对于path为/的对应到的导入的HelloWorld代码这意味着对于地址http://localhost:8080/#/#后面是/会使用/对应的HelloWorld进行页面渲染。
方法二看目录
使用标准化工具来组织代码的好处是文件的位置和命令都有迹可循。我们看到根目录下index.html之外的文件名字都表明这些文件是一些配置相关的文件。而其他文件夹根据名字可以知道
build是写好代码之后构建完毕用于部署到服务器上的文件夹config是用来放配置的目录node_modules存放项目相关的依赖包src是source的缩写所以是存放源代码的地方static是静态的意思该目录是用来存放一些静态文件的地方test是放代码测试文件的地方
所以如果我们要查找页面的内容涉及代码属于可改变的内容而非静态文件应该在src目录下找打开src目录可以看到三个目录和两个文件。一般来说直接存放在目录下的是类似于程序入口一样的文件。根据文件名称我们班先尝试打开main.js查看内容 可以看到main.js里面import 导入了一些东西虽然我们不知道具体是什么但是我们的代码是标准化的所以根据命名可以推测
App作为appliaction应用的简写应该代表跟应用相关的内容router是路由器的意思所以应该是控制网页路由的部分。路由就是道路向导的意思指的是告诉浏览器地址栏输入的地址对应着代码中哪一部分的内容。Vue是我们用的前端框架的名称。前端框架就是生成页面内容的工具所以这里使用了vue()并且传入了App和router这两部分内容以及我们看到了#app这个用法app是我们在index.html代码中看到的body idapp/body的id所以这里应该是定位到了index.html的body位置
根据以上三点我们可以基本确定我们在浏览器中看到的内容就是从这里传到index.html并被浏览器展示出来的。
进一步我们查看App的内容看页面的图片和文字是如何引入到页面的打开App.vue之后可以看到内容如下
我们看到光标所在位置有一个img引用了一个logo.png这就是页面展示的vuelogo图片来源。至于logo图片下面的文本和跳转链接没有看到具体的代码只有一行router-view/所以考虑这些内容是由这行代码处理的。
接下来我们查资料可以知道看着router-view愣猜只能知道是跟路由和展示有关其他的就得靠查资料补充了在main.js中传入的router会把router-view替换成与path值对应的components。
打开router目录下的index.js这里我们浏览器输入的path是/在index.js中该路径对应的components是HelloWorld由HelloWorld.vue导入 如下 于是我们果断打开HelloWorld.vue可以看到浏览器页面展示的内容基本都在HelloWorld里面了 但是我们看到代码中的h1内容不是我们在浏览器看到的Welcome to Your Vue.js App而是{{ msg }}可以推测这里是一个变量引用的方式msg的值应该是Welcome to Your Vue.js App所以我们搜索找到msg位置如下 如我们所料msg的值是Welcome to Your Vue.js App于是我们将值改成Hello Vue World!并刷新页面可以看到页面内容如下 页面展示的标题文本变成了我们修改后的内容。 我们的推测都得到了验证我们也明白了vue是如何将代码渲染到浏览器的。
至此我们通过一个HelloWorld项目掌握了vue如何将浏览器地址对应到具体代码标准化的代码文件结构以及如何修改代码使得页面展示我们希望的内容。 vue入门(●ˇ∀ˇ●) 达成✔ 写文不易如果对你有帮助的话来一波点赞、收藏、关注吧~
