山东住房和城乡建设局网站首页,seo网站结构如何优化,wordpress收费版验证方式,wordpress 内容替换1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 目录
五、vscode集成npm开发vue项目
1、vscode安装所需要的插件#xff1a;
2、搭建一个vue小页面(入门vue)
3、大致理解… 1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 目录
五、vscode集成npm开发vue项目
1、vscode安装所需要的插件
2、搭建一个vue小页面(入门vue)
3、大致理解Vue设计思想
4、简单上手
【1】组件如果新建以及如何使用组件
解决报错Component name Hello should always be multi-word
【2】如何重用组件以及组件如何传值
5、element-ui提供通用组件
【1】下载element-ui
解决报错Could not resolve dependency:npm ERR! peer vue^2.5.17 from element-ui2.15.13
tips如何运行从网上下载的项目代码
【2】引入elementUI
解决报错vue引入Element-ui报错
【3】简单上手基础表格 五、vscode集成npm开发vue项目
1、vscode安装所需要的插件
Vue 开发工具 Vetur用vue开发的必装官方推荐作用高亮.vue文件附带有格式化功能配合Eslint插件对代码进行格式化检查。代码规范监测 ESLint 作用检查你的js、html、css代码确保它们符合规范并且代码风格保持一致性强制性的规则你少写一个空格或者多敲一个回车都会被严格的指出来强迫症的福音第一次用它的同学可能会抓狂熟悉后你会感谢它。使用想让插件生效你的项目还得做一番复杂的配置好在vue-cli生成的项目帮我们把配置都生成好了你也不必修改什么规则直接用就行在使用vue-cli生成webpack项目时会询问你是否启用eslint并且使用哪套规范选择Standard规范就行。 代码格式化插件Prettier - Code formatter上面三个插件能够在保存时文件时自动格式化代码运行项目时能够检测代码不规范的地方针对上面三个插件的配置都已包含在了源码里面只需安心编码即可。
2、搭建一个vue小页面(入门vue)
1启动vscode点击“open folder”选择刚才利用webpack打包生成的vue项目所在目录D:\my\vue-code\hello-vue
当然也可以通过在Terminal控制台输入指令控制vue项目启动。 Vue.config.js说明代码生成器生成的Vue.config.js文件是已经配置好的基本上不需要进行调整。 2把vscode的终端cd到hello-vue在Terminal控制台输入指令控制vue项目启动。
进入项目的目录【D:\my\vue-code\hello-vue】文件夹下运行下述命令以后用启动命令启动项目
npm run serve
会在本地启动一个web服务器这个web服务器有个好处是可以自动去刷新页面。 Ctrlc关闭web服务器 复制任意一个路径用浏览器打开浏览器有可能不会自动弹出一个页面。
在浏览器打开http://localhost:8080/进行访问效果如下图所示 3、大致理解Vue设计思想 对于Vue需要理解Vue增删页面的模式组件和路由(就是网页链接 URL)的跳转模式。 首先理解 vue 的设计理念组件化是 vue 最为成功的一项涉及。组件化这个特性把一整个网站都打散成了很小的一个又一个部分。 举个例子目前项目目录下有三个文件 整个项目目录下的 index.htmlsrc目录下的 App.vuecomponents 文件夹下的 HelloWorld.vue理解这三者的关系很重要 Index是一个最外层的网站框架它的head 里边可以定义一些 CSS 一类的它的body 部分完全是空的它仅仅载入了一个名字叫做 app 的 vue module。 App.vue是嵌套在 index.html 中的 用了HelloWorld.vue这个组件并将它显示在了Logo的下方并且是通过router来控制的显示而不是直接插入组件。 vue文件都是这个模式一共由三个部分构成 上边的template组件的结构 img altVue logo src./assets/logo.png插入了一个图片HelloWorld msgWelcome to Your Vue.js App/HelloWorld组件。中间的 script 放组件的行为代码定义了这个组件所用到的数据和函数后边的style放组件的css样式4、简单上手
【1】组件如果新建以及如何使用组件
1分析 2上手创建新组件并修改App.vue进行配置 解决报错Component name Hello should always be multi-word 场景复现使用vue-cli创建Vue项目在创建组件的时候报错。 原因eslint-plugin-vue 版本更新到8相较之前版本8 版本中新增了不少规则其中要求组件名称以驼峰格式命名。 解决方法 方法一遵守规则将组件名改为驼峰格式命名如hello 改为 helloHello方法二关闭规则编辑项目根目录下的vue.config.js1这里我们先用第2种方法 const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,lintOnSave: false, // 新增代码
})2用第一种方法来重命名 然后重新启动vscode就会发现组件已经不报错了。 ok问题解决。 然后运行项目终端显示如下 复制任意一个路径用浏览器打开浏览器有可能不会自动弹出一个页面。
在浏览器打开http://localhost:8080/进行访问效果如下图所示 【2】如何重用组件以及组件如何传值
1分析 在浏览器打开http://localhost:8080/进行访问效果如下图所示 2如果想要前端显示多个电影那么 在浏览器打开http://localhost:8080/进行访问效果如下图所示 5、element-ui提供通用组件 Element一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。是国内饿了么公司提供的一套开源前端框架简洁优雅提供了Vue、React、Angular等多个版本。 官网地址Element - The worlds most popular Vue UI framework 【1】下载element-ui 推荐使用 npm 的方式安装它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S
安装成功后前端项目中package.json会自动注册 解决报错Could not resolve dependency: npm ERR! peer vue^2.5.17 from element-ui2.15.13 场景复现在vscode的终端输入指令 npm i element-ui -S 报错 原因vue3.0 不兼容 element-ui 于是推出了element-plus 解决方法下载 element-plus 1在vscode的终端输入指令来下载 element-plus npm install element-plus --save 好像似乎没什么用。。。 2之后又查了查看到别的博客安装elementUI npm install --legacy-peer-deps element-ui --save3查看pachage.json可以看到 ok问题解决。 tips如何运行从网上下载的项目代码 1只需要进入该项目然后再csvode终端输入 npm install 这条命令会自动在文件夹里找pachage.json并且自动下载所需要的库。 2下载安装完成之后直接运行项目即可 npm run serve 【2】引入elementUI
按照vue官网教程在main.js中引入element
import Vue from vue;
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import App from ./App.vue;Vue.use(ElementUI);new Vue({el: #app,render: h h(App)
}); 以上代码便完成了 Element 的引入。需要注意的是样式文件需要单独引入。 解决报错vue引入Element-ui报错 场景复现vue引入Element-ui报错 原因看官方文档 发现vue3已经不支持原来的饿了么ui了需要使用与vue3适配的Element-plus 解决方法在main.js中引入 import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vueconst app createApp(App)app.use(ElementPlus)
app.mount(#app) 【3】简单上手基础表格 地址Element - The worlds most popular Vue UI framework 按照vue官网教程新建组件 testTable.vue修改App.vue配置
templateel-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table/templatescriptexport default {data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}}}/scriptstyle/style 在浏览器打开http://localhost:8080/进行访问效果如下图所示
