网页制作与网站建设试卷,好网站建设公司服务,网站手机端的优势,网站域名详解一、环境准备
1.依赖环境#xff1a;NodeJS
官网#xff1a;Node.js
2.脚手架#xff1a;Vue-cli
参考网址#xff1a;安装 | Vue CLI
介绍#xff1a;Vue-cli用于快速的生成一个Vue的项目模板。主要功能有#xff1a;统一的目录结构#xff0c;本地调试#xff0…
一、环境准备
1.依赖环境NodeJS
官网Node.js
2.脚手架Vue-cli
参考网址安装 | Vue CLI
介绍Vue-cli用于快速的生成一个Vue的项目模板。主要功能有统一的目录结构本地调试热部署单元测试集成打包。
//全局安装脚手架
npm install -g vue/cli
//通过查看vue版本,判断脚手架是否安装成功
vue --version
二、创建vue项目
1.命令行创建vue
参考网址创建一个项目 | Vue CLI
命令行操作
创建vue项目
vue create project-name(vue项目名称自定义)
eg:
-Manually select features
-Babel Router
-2.x
-yes,In package.json,yes,babel-router
图形化界面操作
图形化界面创建vue项目
1.vue ui
然后再当前目录下直接输入命令vue ui进入到vue的图形化界面如下图所示 然后我门选择创建按钮在vue文件夹下创建项目如下图所示 然后来到如下界面进行vue项目的创建 然后预设模板选择手动如下图所示
然后再功能页面开启路由功能如下图所示 然后再配置页面选择语言版本和语法检查规范如下图所示 然后创建项目进入如下界面 最后我们只需要等待片刻即可进入到创建创建成功的界面如下图所示 到此vue项目创建结束
2.vue项目目录介绍 3.运行vue项目
1方式一命令行方式
直接基于cmd命令窗口在vue目录下执行输入命令npm run serve即可如下图所示 2方式二vscode图形界面
1.NPM脚本窗口调试出来
第一步通过设置/用户设置/扩展/MPM更改NPM默认配置如下图所示 然后重启VS Code并且双击打开package.json文件然后点击资源管理器处的3个小点勾选npm脚本选项如图所示 2.点击NPM脚本中的serve运行vue项目 3.补充
对于8080端口经常被占用所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容添加如下代码
devServer:{port:7000
}
如下图所示然后我们关闭服务器并且重新启动端口更改成功可以通过浏览器访问7000端口来访问我们之前的项目 三、Vue项目开发流程
index.html
1.我们浏览器访问的首页是index.html在public/index.htmlvue项目使得浏览器所呈现的index.html内容却很丰富。
main.js
2.对于vue项目index.html默认是引入了入口函数main.js在src/main.js。
//main.js 代码
import Vue from vue
import App from ./App.vue //导入当前目录下得App.vue并且起名为App
import router from ./router
Vue.config.productionTip false
new Vue({router, //相当于router : routerrender: h h(App)
}).$mount(#app)
代码关键点
import:导入指定文件并重新起名。
new Vue():创建vue对象
$mount(#app);将vue对象创建的dom对象挂在到idapp的这个标签区域中作用和之前学习的vue对象的le属性一致。main.js中通过代码挂在到index.html的idapp的标签区域的
router:路由
render:主要使用视图的渲染将App对象渲染过来这App对象就是App.vue组件根组件
App.vue
3.App.vue(根组件整个页面看到的内容)
vue组件.vue结尾的都是vue组件
vue的组件文件包含3部分
- template: 模板部分主要是HTML代码用来展示页面主体结构的
- script: js代码区域主要是通过js代码来控制模板的数据来源和行为的
- style: css样式部分主要通过css样式控制模板的页面效果的 四、Vue组件库Element:美观页面
Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。
ElementUI就是一款侧重于V开发的前端框架主要用于开发美观的页面的。
参考网址Element - The worlds most popular Vue UI framework
1.安装ElementUI
npm i element-ui -S
2.在main.js这个入口js引入ElementUI的组件库
//在main.js中添加以下代码
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
Vue.use(ElementUI);
3.创建组件文件创建.vue后缀的vue组件文件
//在src/views目录下创建一个vue组件文件注意组件名称后缀是.vue
//基本组件代码vue组件包括3部分模板脚本样式
template
/template
script
export default {
}
/script
style
/style
4.使用Vue组件库Element代码到组件文件
去ElementUI的官网找到组件库Element - The worlds most popular Vue UI framework把需要用到的组件代码复制出来到组件文件中template模块中使用 5.在App.vue中使用自定义的组件
在默认访问的根组件src/App.vue中引入我们自定义的组件具体操作步骤如下 然后App.vue组件中的具体代码如下代码是我们通过上述步骤引入element-view组件时自动生成的。
templatediv idapp!-- {{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
五、路由:实现页面切换
前端路由URL中的hash(#号之后的内容与组件之间的对应关系。当点击导航栏时浏览器的地址栏会发生变化路由自动更新显示与url所对应的vue组件。
Vue官方提供的路由插件Vue Router的组成 VueRouter路由器类根据路由请求在路由视图中动态渲染中选中的组件。 router-link请求连接组件浏览器会解析成a标签。 router-view动态视图组件用来渲染展示与路由路径对应的组件。
工作原理 1.安装vue-router插件
npm install vue-router
提示在安装脚手架的时候已经勾选了路由功能就不需要再次安装了
2.定义路由表在src/router/index.js文件
//根据其提供的模板代码进行修改
//注意需要去掉没有引用的import模块。
import Vue vue
import VueRouter vue-routerVue.use(VueRouter)const routes [{path: /emp, //地址hashname: emp,component: () import(../views/tlias/EmpView.vue) //对应的vue组件},{path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)}
]const router new VueRouter({routes
})export default router
在main.js入口中已经引入了router功能
//main.js文件
import router from ./router
这里路由基本信息配置好了路由表已经被加载此时我们还缺少2个东西就是router-link和router-view
3.在自定义组件中定义router-link
//router-link组件,用户点击发出路由请求;根据路由请求在路由表中找到对应的vue组件
eg:
el-menu-item index1-1router-link to/dept部门管理/router-link
/el-menu-item
4.在App.vue中定义router-view作为组件的切换
//在自定义组件中定义router-link后发送路请求在路由表中找到对应的vue组件最后VueRouter会切换router-view中的组件进行视图更新。
eg:
templatediv idapp!-- {{message}} --!-- element-view/element-view --!-- emp-view/emp-view --router-view/router-view/div
/templatescript
// import EmpView ./views/tlias/EmpView.vue
// import ElementView ./views/Element/ElementView.vue
export default {components: { },data(){return {message:hello world}}
}
/script
style/style
六、项目打包部署
1.前端工程打包
我们直接通过VS Code的NPM脚本中提供的build按钮来完整如下图所示直接点击即可 然后会在工程目录下生成一个dist目录用于存放需要发布的前端资源如下图所示 2.前端工程部署
1安装nginx
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。
其目录结构如果要发布项目直接将资源放进html目录下 2部署前端工程
将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下如下图所示 然后我们通过双击nginx下得nginx.exe文件来启动nginx如下图所示 nginx服务器的端口号是80所以启动成功之后我们浏览器直接访问http://localhost:80 即可其中80端口可以省略。
到此我们的前端工程发布成功。
注意如果80端口被占用我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示
