IDEA搭建vue |
您所在的位置：网站首页 › vue-loader安装命令 › IDEA搭建vue |
IDEA搭建vue
|
💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ！ Vue.js概述Vue 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动 MVVM模型
MVVM模型的特点： 低耦合：视图(View)可以独立Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变可复用：可以将视图逻辑放在ViewModel中，让更多View重用这段视图逻辑独立开发：开发人员可以专注于业务逻辑和数据开发(ViewModel)，设计人员可以专注于页面设计可测试：测试可以针对ViewModel编写 Hello Vue Document {{message}} var vm = new Vue({ el: "#app", //绑定元素 //Model：数据 data:{ message:"Hello，Vue!" } }); 缩写 v-bind & v-on v-bind缩写 ... ... ... v-on缩写 ... ... ...总结： 它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中 Vue的7个属性 el属性指示vue编译器从什么地方开始解析 vue的语法 data属性组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中 methods属性放置页面中的业务逻辑，js方法一般都放置在methods中 template属性设置模板，会替换页面元素 computed属性用来计算，根据已经存在的属性计算出新的属性，对于同样的数据，会缓存 render属性创建真正的Virtual Dom watch属性监听data中数据的变化 双向数据绑定双向数据绑定，是指视图 View 的变化能实时地让数据模型 Model 发生变化，而数据的变化也能实时更新到视图层 输入框双向数据绑定 输入的文本:{{message}} var vm = new Vue({ el: "#app", //绑定元素 //Model：数据 data:{ message:"同步更新" } }); 单选框双向数据绑定 性别： 男 女 选中了谁：{{wei_shuo}} var vm = new Vue({ el: "#app", //绑定元素 //Model：数据 data:{ wei_shuo:"" } }); 下拉框双向数据绑定 下拉框： ---请选择--- A B C D var vm = new Vue({ el: "#app", //绑定元素 //Model：数据 data:{ selected:"---请选择---" } }); 组件
组件可以扩展 HTML 元素，封装可重用的代码；组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树 格式： Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一个参数
Axios是一个开源的可以用在浏览器和NodeJS的异步通讯框架，主要作用是实现AJAX异步通讯 特点： 浏览器创建XMLHttpRequests从node.js创建http请求支持Promise API（JS中链式编程）拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF（跨站请求伪造） 背景Vue.js是一个视图层框架，作者（尤雨溪）严格准守SoC（关注度分离原则），所以Vue.js并不包含AJAX的通讯功能，为了解决通信问题，作者单独开发了名为vue-resource的插件，2.0版本以后停止了对该插件的维护并推荐了Axios框架 Vue声明周期
Vue实例有完整的声明周期，开始创建、编译模板、挂载DOM、渲染->更新->渲染、卸载等一系列操作，也就是Vue实例从创建到销毁的过程，称为Vue的声明周期 声明周期钩子函数 创建前（beforeCreate）Vue实例开始初始化时调用 创建后（created）实例创建之后进行调用，此时尚未开始DOM编译 载入前（beforeMount）依然得不到具体的DOM元素，但vue挂载的根节点已经创建 载入后（mounted）在DOM文档渲染完毕之后进行调用 更新前（beforeUpdate）data更新时触发 更新后（updated）data更新时触发 销毁前（beforeDestroy）销毁实例前进行调用，此时实例任然有效 销毁后（destroyed）实例被销毁之后进行调用 创建data.json文件 { "name": "wei_shuo", "url": "http://baidu.com", "page": "1", "isNonProfit": "true", "address": { "street": "陕西", "city": "西安", "country": "中国" }, "links": [ { "name": "B站", "url": "https://www.bilibili.com/" }, { "name": "4399", "url": "https://www.4399.com/" }, { "name": "百度", "url": "https://www.baidu.com/" } ] } 引入vue.js和axios.js Vue.html文件 Document [v-clock]{ display: none; } {{info.name}} {{info.address.street}} 点击 var vm = new Vue({ el: "#app", data() { return { //请求的返回参数，必须和json字符串一致 info:{ name:null, address:{ street:null, city:null, contry:null }, url:null } } }, mounted() { //钩子函数 链式编程 axios.get('../data.json').then(response => (this.info = response.data)); } }) /* 浏览器显示结果： wei_shuo 陕西 点击 */ 内容分发（Slot插槽）Vue.js中使用元素作为承载分发内容的出口，作者称为插槽，可以应用在组合组件的场景中
自定义事件分发 格式: this.$emit('自定义事件名',参数) this.$emit('remove', index); Document Vue.component("todo", { template: '' + '' + '' + '' + '' + '' }); Vue.component("todo-title", { props: ['title'], template: '{{title}}' }); Vue.component("todo-items", { props: ['item', 'index'], //只能绑定当前组件的方法 template: '{{index}}---{{item}}删除', methods: { remove: function (index) { //自定义事件分发 //this.$emit('自定义事件名',参数) this.$emit('remove', index) } } }); var vm = new Vue({ el: "#app", data: { title1: "wei_shou列表", todoItems: ['学习Java', '学习Linux', '学习Vue'], removeItems: function (index) { console.log("删除" + this.todoItems[index] + "OK") this.todoItems.splice(index, 1); //一次删除一个元素 } } }) vue-cli项目vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板；预先定义的目录结构及基础代码，使开发更加快速 功能： 统一项目结构本地调试热部署单元测试集成打包上线 创建Vue项目，新建目录cmd目录窗进入创建的目录路径运行vue init webpack myvue命令初始化
等待5分钟左右，即可初始化完成 项目名称 ? Project name (myvue) 项目描述 ? Project description (A Vue.js project) 作者 ? Author 构建(选择第一个即可：运行时编译) ? Vue build (Use arrow keys) vue路由，以下n即是手动创建，y即是自动创建 ? Install vue-router? (Y/n) ? Use ESLint to lint your code?(Y/n) ? Set up unit tests (Y/n) ? Setup e2e tests with Nightwatch? (Y/n) No即不会自动npm install，yes就会自动npm install ? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) Yes, use NPM Yes, use Yarn No, I will handle that myself D:\Java\Vue-cli>vue init webpack myvue ? Project name (myvue) ? Project description (A Vue.js project) ? Author ? Vue build (Use arrow keys) > Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re nder functions are required elsewhere ? Install vue-router? No ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) > Yes, use NPM Yes, use Yarn No, I will handle that myself
cd myvue npm install npm run dev cmd窗口进入myvue路径 执行npm install命令 如果中途报错，安装命令窗口提示执行提示命令即可修复
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代JavaScript应用程序的静态模块打包工具，当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 安装Webpack npm install webpack -gnpm install webpack-cli -g
创建webpack.config.js配置文件 entry：入口文件，指定webpack用哪个文件作为项目入口output：输出，指定webpack把处理完成的文件放置到指定路径module：模板，用于处理各类类型的文件plugins：插件，如：热更新、代码重用……resolve：设置路径指向watch：监听，用于设置文件改动后直接打包 webpack使用 创建项目创建名为modules的目录，用于放置JS模板等资源文件modules下创建模板文件，用于编写JS模板相关代码（hello.js） //暴露一个方法 exports.sayHi = function () { document.write("wei_shuo") } modules下创建入口文件，用于打包时设置entry属性（main.js） var hello = require("./hello"); hello.sayHi(); 项目目录下创建配置文件（webpack.config.js） module.exports = { entry: './modules/main.js', output: { filename: "./js/bundle.js" } }; 在IDEA终端使用webpack命令打包（bundle.js） (()=>{var r={645:(r,t)=>{t.sayHi=function(){document.write("wei_shuo>")}}},t={};(function e(o){var i=t[o];if(void 0!==i)return i.exports;var n=t[o]={exports:{}};return r[o](n,n.exports,e),n.exports})(645).sayHi()})(); 项目目录下创建HTML页面，导入webpack打包后的JS文件（index.html） Document说明 参数 --watch 用于监听变化 webpack --watch vue-router路由Vue Router 是 Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举 功能：vue-router官方 嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码 安装vue-router 基于第一个vue-cli进行测试学习；查看node_modules中是否存在vue-routervue-router是一个插件包，所以需要用npm&cnpm进行安装 打开IDEA终端，输入命令，安装vue-router npm install vue-router --save-dev
两种原因： 路由格式编写错误路由格式 routes: [{ // 路径 path: '/home', // 组件名 component: Home }]; 对应版本不兼容安装的时候默认安装最新版本可能与其他插件不兼容，推荐使用稳定版本[email protected] 卸载：npm uninstall vue-router 下载&降级：npm install [email protected] --save-dev // @xxx 自己指定版本
目录components下创建vue组件 Content.vue 内容页面 export default { name: "Content" } Main.vue 首页 export default { name: "Main" } 创建存放路由的文件夹router目录router创建router路由 index.js //导入vue和vue-router组件 import Vue from "vue"; import VueRouter from "vue-router"; import Content from "../components/Content"; import Main from "../components/Main"; //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter({ routes:[ { //路由路径 path:'/content', name:'content', //跳转组件 component:Content }, { //路由路径 path:'/main', name:'content', //跳转组件 component:Main } ] }); 配置路由在main.js中配置路由 import Vue from 'vue' import App from './App' //导入配置路由文件 import router from './router' //自动扫描里面的路由配置 Vue.config.productionTip = false new Vue({ el: '#app', //配置路由 router, components: { App }, template: '' }) 使用路由在App.vue中使用路由 欢迎wei_shuo 首页 内容页面 export default { name: 'App', } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } vue-router使用流程 components目录下创建vue组件（wei.vue） wei export default { name: "wei" } 目录router创建router路由（index.js） //导入vue和vue-router组件 import Vue from "vue"; import VueRouter from "vue-router"; //导入components目录中vue组件 import wei from "../components/wei" //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter({ routes:[ { //路由路径 path:'/wei', //name 可省略 name:'content', //跳转组件 component:wei } ] }); 在main.js中配置路由 欢迎wei_shuo wei export default { name: 'App', } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } 在App.vue中使用、导入配置路由 import Vue from 'vue' import App from './App' //导入配置路由文件 import router from './router' //自动扫描里面的路由配置 Vue.config.productionTip = false new Vue({ el: '#app', //配置路由 router, components: { App }, template: '' }) 结果测试 网页点击首页
Axios 是一个基于 promise（异步编程的一种解决方案）网络请求库，作用于node.js和浏览器中， 它是 isomorphic（即同一套代码可以运行在浏览器和node.js中）；服务端它使用原生 node.js http 模块,，而在客户端 （浏览端）则使用 XMLHttpRequests 异步编程：异步编程是让程序并发运行的一种手段 功能：Axios中文网 从浏览器创建 XMLHttpRequests从 node.js 创建http请求支持Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防御XSRF 安装 $ npm install axios Vue+ElementUIElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element官网 创建工程 创建hello-vue工程 vue init webpack hello-vue
创建页面目录（views）和前端路由目录（routers） 页面目录（views）下创建 Main.vue（首页） 首页 export default { name: "Main" } Login.vue（登录页面） 欢迎登录 登录 请输入账号和密码 确 定 export default { name: "Login", data() { return { form: { username: '', password: '' }, // 表单验证，需要在 el-form-item 元素中增加 prop 属性 rules: { username: [ {required: true, message: '账号不可为空', trigger: 'blur'} ], password: [ {required: true, message: '密码不可为空', trigger: 'blur'} ] }, // 对话框显示和隐藏 dialogVisible: false } }, methods: { onSubmit(formName) { // 为表单绑定验证功能 this.$refs[formName].validate((valid) => { if (valid) { // 使用 vue-router 路由到指定页面，该方式称之为编程式导航 this.$router.push("/main"); } else { this.dialogVisible = true; return false; } }); } } } .login-box { border: 1px solid #DCDFE6; width: 350px; margin: 180px auto; padding: 35px 35px 15px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 25px #909399; } .login-title { text-align: center; margin: 0 auto 40px auto; color: #303133; } 前端路由目录（routers）下创建index.js //导入vue和vue-router组件 import Vue from "vue"; import Router from 'vue-router' //添加路由组件 import Main from "../views/Main"; import Login from "../views/Login"; //使用vue-router组件 Vue.use(Router) //导出默认接口路由 export default new Router({ routes:[ { //路由路径 path:'/main', //跳转组件 component:Main }, { //路由路径 path:'/login', //跳转组件 component:Login } ] }); main.js（入口js文件） import Vue from 'vue' import App from './App' //导入配置路由文件，自动扫描里面的路由配置 import router from './routers' //导入ElementUI import Element from 'element-ui' //导入ElementUI的CSS import 'element-ui/lib/theme-chalk/index.css'; //安装路由 Vue.use(router); //安装ElementUI Vue.use(Element) Vue.config.productionTip = false new Vue({ el: '#app', //路由 router, //ElementUI render: h => h(App) }) App.vue（根组件） export default { name: 'App' } IDEA终端运行 npm run dev
查看本机安装的node版本安装对应的node-sass版本
安装node-sass 6.0+版本（6.0.1） package.json调整版本 "sass-loader": "^6.0.1" 终端执行命令更新依赖项 npm install --legacy-peer-deps 安装对应版本的node-sass cnpm install [email protected] --legacy-peer-deps 排错四
降级之后，需要使用命令更新依赖 npm install --legacy-peer-deps 排错总结 版本问题，更改package.json版本后，需要执行更新依赖的命令 npm install --legacy-peer-deps 系统提示执行命令，可以直接执行即可错误多半是版本兼容错误，调整对应版本即可，如果是依赖错误的话，需要在命令后加上 --legacy-peer-deps 运行项目 运行项目 npm run dev vue项目目录分析build：构建脚本目录 config：项目配置 node_modules：npm加载项目的依赖模块 src：源码目录 main.js——入口js文件App.vue——根组件components——共组件目录assets——资源目录，这里的资源会被wabpack构建routes——前端路由store——应用级数据（state）views——页面目录static：静态资源目录，不会被webpack构建 package.json：npm包配置文件，定义项目的npm脚本、依赖包等信息 README.md：项目的说明文档，markdown格式 npm命令解析 安装模块到项目下 npm install moduleName -g：模块安装到全局 npm install -g moduleName –save：模块安装到项目下，并在package文件的devDependencies结点写入依赖，-S 为缩写 npm install --save moduleName –save-dev：将模块安装到项目目录下，并且在package文件devDependencies结点写入依赖，-D为缩写 npm install --save-dev moduleName 路由嵌套嵌套路由（子路由），实际应用中，通常由多层嵌套的组件组合而成，同样的URL中各段动态路径也按某种结构对应嵌套的各层组件 /user/johnny/profile /user/johnny/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+ 项目结构
创建页面目录（views）和前端路由目录（routers） 页面目录（views）下创建，user目录 main.vue（首页） 用户管理 个人信息 用户列表 内容管理 分类管理 内容列表 系统管理 系统信息 系统内容 个人信息 退出登录 export default { name: "Main" } .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } ProFile.vue（个人信息） 个人信息 export default { name: "UserProFile" } List.vue（用户列表） 用户列表 export default { name: "UserList" } 前端路由目录（routers）下创建index.js //导入vue和vue-router组件 import Vue from "vue"; import Router from 'vue-router' //添加路由组件 import Main from "../views/Main" import Login from "../views/Login" import UserList from '../views/user/List' import UserProFile from '../views/user/ProFile' //使用vue-router组件 Vue.use(Router) //导出默认接口路由 export default new Router({ routes: [ { //路由路径 path: '/main', //跳转组件 component: Main, //嵌套路由 children: [ {path: '/user/profile', component: UserProFile}, {path: '/user/list', component: UserList} ] }, { //路由路径 path: '/login', //跳转组件 component: Login } ] }); main.js（入口js文件） import Vue from 'vue' import App from './App' //导入配置路由文件，自动扫描里面的路由配置 import router from './routers' //导入ElementUI import Element from 'element-ui' //导入ElementUI的CSS import 'element-ui/lib/theme-chalk/index.css'; //安装路由 Vue.use(router); //安装ElementUI Vue.use(Element) Vue.config.productionTip = false new Vue({ el: '#app', //路由 router, //ElementUI render: h => h(App) }) App.vue（根组件） export default { name: 'App' } IDEA终端运行
beforeRouteEnter：在进入路由前执行 beforeRouteLeave：在离开路由前执行 to：路由将要跳转的路径信息from：路径跳转前的路径信息next：路由的控制参数 next() 跳入下一个页面next(’/path’) 改变路由的跳转方向，使其跳到另一个路由next(false) 返回原来页面next((vm)=>{}) 仅在beforeRouteEnter中使用，vm是组件实例 export default { //进入路由之前执行 beforeRouteEnter:(to,from,next)=>{ console.log("STARE"); next(); }, //进入路由之后执行 beforeRouteLeave:(to,from,next)=>{ console.log("END"); next(); } } 异步请求 安装Axios和vue-axios cnpm install axios -s cnpm install --save vue-axios 安装Axiosmain.js中导入Axios组件 //导入Axios import axios from 'axios' import VueAxios from 'vue-axios' //安装axios和VueAxios Vue.use(VueAxios, axios) Vue工程化项目目录结构node_modules 通过npm install命令安装的软件包存放的目录（非全局安装） dist 项目打包发布目录 public 最后打包时，该目录中的文件会直接复制到dist目录中 public/index.html 首页入口文件public/favicon.ico 图标文件src src/assets 静态资源文件目录 src/components 组件文件目录 src/router 路由插件目录 src/router/index.js 路由插件配置文件src/store 状态管理插件目录 src/store/index.js 状态管理插件配置文件src/plugins 插件目录，一般存放axios.js插件文件 src/views 组件文件目录（仅仅具有模板和样式，没有js程序） src/App.vue 应用组件 src/main.js 程序逻辑入口文件 package.json 包管理配置文件，记录项目需要的各种软件包信息 package-lock.json 包版本锁定配置文件 vue.config.js vue项目配置文件 🌼 结语：创作不易，如果觉得博主的文章赏心悦目，还请——点赞👍收藏⭐️评论📝冲冲冲🤞
|
【本文地址】
今日新闻 |
推荐新闻 |