vue项目工程化入门

  • mac电脑

1、项目创建

  • 使用Vue-cli来完成

1.1、NodeJS安装和Vue-cli安装

# 安装nodejs18
brew install node@18 
# 更新npm版本到9.6.7
npm install -g [email protected]
# 安装Vue-cli
npm install -g @vue/cli

1.2、图形化界面创建

  • 通过命令先进入到图形化界面,然后再进行vue工程的创建
vue ui

图形化界面如下:

到此,vue项目创建结束

2、vue项目目录结构介绍

  • 我们通过VS Code打开之前创建的vue文件夹,打开之后,呈现如下图所示页面:

  • vue项目的标准目录结构以及目录对应的解释如下图所示:

  • 其中我们平时开发代码就是在src目录

3、运行vue项目

3.1、第一种方式:通过VS Code提供的图形化界面 ,如下图所示:

点击之后,我们等待片刻,即可运行,在终端界面中,我们发现项目是运行在本地服务的8080端口,我们直接通过浏览器打开地址

最终浏览器打开后,呈现如下界面,表示项目运行成功

其实此时访问的是 src/App.vue这个根组件,此时我们打开这个组件,修改代码:添加内容Vue

只要我们保存更新的代码,我们直接打开浏览器,不需要做任何刷新,发现页面呈现内容发生了变化,如下图所示:

这就是我们vue项目的热更新功能

对于8080端口,经常被占用,所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容,添加如下代码:

devServer:{
    port:7000
}

如下图所示,然后我们关闭服务器,并且重新启动,端口更改成功,可以通过浏览器访问7000端口来访问我们之前的项目

3.2、第二种方式:命令行方式

在vue目录下,执行输入命令npm run serve即可,如下图所示:

3.3、补充:NPM脚本窗口调试出来

第一步:通过设置/用户设置/扩展/MPM更改NPM默认配置,如下图所示

然后重启VS Code,并且双击打开package.json文件,然后点击资源管理器处的3个小点勾选npm脚本选项,如图所示

然后就能都显示NPM脚本小窗口了。

4、Vue项目开发流程

那么我们访问的首页是index.html,但是我们找到public/index.html文件,打开之后发现,里面没有什么代码,但是能够呈现内容丰富的首页:如下图所示:

我们仔细观察发现,index.html的代码很简洁,但是浏览器所呈现的index.html内容却很丰富,代码和内容不匹配,所以vue是如何做到的呢?接下来我们学习一下vue项目的开发流程。

对于vue项目,index.html文件默认是引入了入口函数main.js文件,我们找到src/main.js文件,其代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

上述代码中,包括如下几个关键点:

  • import: 导入指定文件,并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
  • new Vue(): 创建vue对象
  • $mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中,作用和之前学习的vue对象的le属性一致。
  • router: 路由,详细在后面的小节讲解
  • render: 主要使用视图的渲染的。

来到public/index.html中,我们删除div的id=app属性,打开浏览器,发现之前访问的首页一片空白,如下图所示,这样就证明了,我们main.js中通过代码挂在到index.html的id=app的标签区域的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区域,但是我们还是没有解决最开始的问题:首页内容如何呈现的?这就涉及到render中的App了,如下图所示:

那么这个App对象怎么回事呢,我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分:

  • template: 模板部分,主要是HTML代码,用来展示页面主体结构的
  • script: js代码区域,主要是通过js代码来控制模板的数据来源和行为的
  • style: css样式部分,主要通过css样式控制模板的页面效果得

如下图所示就是一个vue组件的小案例:

此时我们可以打开App.vue,观察App.vue的代码,其中可以发现,App.vue组件的template部分内容,和我们浏览器访问的首页内容是一致的,如下图所示:

接下来我们可以简化模板部分内容,添加script部分的数据模型,删除css样式,完整代码如下:

<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

保存直接,回到浏览器,我们发现首页展示效果发生了变化,如下图所示:

5、Vue组件库Element

5.1、快速入门

首先,我们先要安装ElementUI的组件库,打开VS Code,停止之前的项目,然后在命令行输入如下命令:

npm install [email protected] 

具体操作如下图所示:

然后我们需要在main.js这个入口js文件中引入ElementUI的组件库,其代码如下:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

具体操作如图所示:

然后我们需要按照vue项目的开发规范,在src/views目录下创建一个vue组件文件,注意组件名称后缀是.vue,并且在组件文件中编写之前介绍过的基本组件语法,代码如下:

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

具体操作如图所示:

最后我们只需要去ElementUI的官网,找到组件库,然后找到按钮组件,抄写代码即可,具体操作如下图所示:

然后找到按钮的代码,如下图所示:

紧接着我们复制组件代码到我们的vue组件文件中,操作如下图所示:

最后,我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件,具体操作步骤如下:

然后App.vue组件中的具体代码如下,代码是我们通过上述步骤引入element-view组件时自动生成的

<template>
  <div id="app">
    <!-- {{message}} -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/Element/ElementView.vue'
export default {
  components: { ElementView },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

然后运行我们的vue项目,浏览器直接访问之前的7000端口,展示效果如下图所示:

到此,我们ElementUI的入门程序编写成功

热门相关:地球第一剑   夫人,你马甲又掉了!   特工重生:快穿全能女神   最强装逼打脸系统   享用有妇之夫