东营市城乡建设局网站,格泰网站建设,wordpress对联广告,黄岩区住房保障建设局网站文章目录Vue环境搭建Idea安装Idea中配置Vue环境Node.js介绍npm介绍Vue.js介绍[^3]Idea介绍Vue环境搭建 概述#xff1a;vue环境搭建#xff1a;需要npm#xff08;cnpm#xff09;#xff0c;而npm内嵌于Node.js#xff0c;所以需要下载Node.js。 下载Node.js#xff1…
文章目录Vue环境搭建Idea安装Idea中配置Vue环境Node.js介绍npm介绍Vue.js介绍[^3]Idea介绍Vue环境搭建 概述vue环境搭建需要npmcnpm而npm内嵌于Node.js所以需要下载Node.js。 下载Node.jsNode.js官方下载 安装Node.js双击 - 选择目录 - 一路next安装程序会自动把node、npm环境变量配置好。 测试Node.jsnpm打开cmd输入 node -v 回车输入 npm -v 回车node内嵌npm出现对应版本号说明安装成功一般是不会有问题的。 设置缓存文件夹和全局模块存放路径 在nodejs路径下新建两个文件夹——node_cache , node_global然后配置 npm config set cache D:\vueProject\nodejs\node_cache npm config set prefix D:\vueProject\nodejs\node_global (引号中路径需要针对自己实际的安装路径) 设置成功后之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里g就是global tips此时你可以在 C:\Users\Administrator 目录下找到 .npmrc文件以文本打开会发现刚刚配置的信息原来在这里 安装cnpm 简介基于 Node.js 安装cnpm淘宝镜像。由于npm是国际的国内访问很慢所以善良的淘宝做了他的镜像 —— cnpm来自官网“这是一个完整 npmjs.org 镜像你可以用此代替官方版本(只读)同步频率目前为 10分钟 一次以保证尽量与官方服务同步。” 安装 npm install -g cnpm --registryhttps://registry.npm.taobao.orgcnpm配置环境变量 打开任意文件夹 - 右键此电脑 - 属性 - 高级系统设置 - 环境变量 新建CNPM_PATH变量 路径要根据自己的实际路径 编辑 path要有global后面的反斜杠 添加 %CNPM_PATH%; 打开cmd测试cnmp -v若失败则需要重启。 安装 下面步入正题… 安装vuecnpm install vue -g 安装vue-cli脚手架1cnpm install vue-cli -g 安装webpack2 全局安装 —— cnpm install webpack -g不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中。 创建vue项目 创建一个基于 webpack 模板的新项目
vue init webpack my-project
这里需要进行一些配置默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob testrunoob.com
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma Mocha? Yes
? Setup e2e tests with Nightwatch? Yesvue-cli · Generated my-project.To get started:cd my-projectnpm installnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack之后会生成目录结构 打包并运行Vue项目 cd my-project cnpm install cnpm run dev 出现Listening at http://localhost:8080即说明成功了可以输入地址 http://localhost:8080 访问刚刚创建的vue项目啦。在cmd中输入 CtrlC 退出
Idea安装
官网下载地址 建议下载 .exe安装包 接下来需要注意的就是安装中的一些选项和安装后的插件安装破解码等。
Idea中配置Vue环境
CtrlAltS 等价于 File - Settings ECMAScript 6 CtrlAltS搜索 JavaScript设置JavaScript language version 为ECMAScript 6新版本不用 安装Vue.js插件 CtrlAltS搜索 plugins 找到后搜索 vue安装插件即可 加入.vue 由于vue文件没有设置读取格式所有没有颜色所以一般以html方式打开 CtrlAltS搜索 File Types找到HTML点击‘’添加 *.vue 配置运行和打包功能 点击ok你就有这两个运行环境了 实现新建vue文件功能可选 CtrlAltS搜索 File and Code Templates 添加vue文件模板 template/templatescriptexport default {}/scriptstyle scoped/style大功告成
Node.js介绍
nodejs不是一个js框架千万不要认为是类似jquery的框架nodejs是js运行时的运行环境是对Google V8引擎进行的封装是一个服务器端的javascript的解释器类比java中jvmjava的开发是什么无疑是jvm自从有了jvmjava才能吹牛说自己是“一次编写处处运行”不管你是windows还是linux只要安装了对应版本的jvm都可以运行.class文件。
同样nodejs的作用和jvm的一样一样的也是js的运行环境不管是你是什么操作系统只要安装对应版本的nodejs那你就可以用js来开发后台程序。
这具有划时代的意义意味着一直以来只能在浏览器上玩来玩去的js可以做后端开发了从有了nodejs后就催生出一大批用js做后台开发的前端人员这部分人员就是偏前端的“全栈程序员”。
npm介绍
npm是nodejs的包管理器package manager。我们在Node.js上开发时会用到很多别人已经写好的javascript代码 如果每当我们需要别人的代码时都根据名字搜索一下下载源码解压再使用会非常麻烦。于是就出现了包管理器npm。 大家把自己写好的源码上传到npm官网上如果要用某个或某些个直接通过npm安装就可以了不用管那个源码在哪里。 并且如果我们要使用模块A而模块A又依赖模块B模块B又依赖模块C和D此时npm会根据依赖关系 把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦转载
Vue.js介绍3
Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。
Vue是基于数据驱动思想开发的javaScript框架使用Vue框架开发可以大大减少繁杂的dom操作。数据驱动使得每一个HTML模块都可以高度内聚通过给不同的HTML模块指定不同的数据模型就可以实现前端的组件化开发方式。组件化可以降低系统各个功能的耦合性并且提高了功能内部的聚合性。 另外Vue框架还开发了一套自己的模板语言采用虚拟dom的方式渲染HTML这使得我们可以依赖Vue来做模板渲染实现前后端分离的开发方式。
Idea介绍
IDEA 全称IntelliJ IDEA是用于java语言开发的集成环境也可用于其他语言IntelliJ在业界被公认为最好的java开发工具之一尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品这家公司总部位于捷克共和国的首都布拉格开发人员以严谨著称的东欧程序员为主。 vue-cli是由vue官方发布的快速构建vue单页面的脚手架和我们工地看到的脚手架就是那么一回事它帮助我们搭建基本的开发环境好比架子搭建好了利用它可以搞定目录结构本地调试单元测试热加载及代码部署等。 ↩︎ webpack 是前端的一个项目构建工具它是基于 Node.js 开发出来的一个前端工具借助于webpack这个前端自动化构建工具可以完美实现资源的合并、打包、压缩、混淆等诸多功能webpack的官网。 ↩︎ vue的学习目录 ↩︎
