- mac电脑
1、项目创建
- 使用Vue-cli来完成
1.1、NodeJS安装和Vue-cli安装
# 安装nodejs18
brew install node@18
# 更新npm版本到9.6.7
npm install -g npm@9.6.7
# 替换淘宝镜像
npm config set registry https://registry.npmmirror.com
# 安装Vue-cli
npm install -g @vue/cli
npm install element-ui@2.15.3
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 element-ui@2.15.3
具体操作如下图所示：
然后我们需要在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的入门程序编写成功
6、打包部署
我们的前端工程开发好了，但是我们需要发布，那么如何发布呢？主要分为2步：
- 前端工程打包
- 通过nginx服务器发布前端工程
6.1、前端工程打包
接下来我们先来对前端工程进行打包
我们直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：
然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：文章来源：https://www.toymoban.com/news/detail-475508.html
6.2 部署前端工程
将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录(/usr/local/var/www)下即可文章来源地址https://www.toymoban.com/news/detail-475508.html
# 安装nginx
brew install nginx
# nginx默认的 webroot(项目挂载目录)
/usr/local/var/www
# 启动nginx服务
brew services start nginx
# 重新加载nginx
brew services restart nginx
# 关闭nginx服务
brew services stop nginx
到了这里，关于vue项目工程化入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
