vue项目

作者: 守护者 | 来源:发表于2021-06-07 09:04 被阅读0次

    基于Idea从零搭建一个最简单的vue项目

    https://www.jianshu.com/p/9c1d4f8ed068

    node.js

    Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。总结一下,node,js提供了javascript在浏览器以外的一个执行环境,满足一些特定的场景需求。

    npm

    npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

    webpack

    WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

    vue2

    是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件系统和vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。在开发中vue会把使用vue语法修饰的html标签与js对象进行绑定,从而使html值变化时可以同步修改js对象,js对象值变化时可以在页面暂时,使开发从复杂的document操作中解脱出来。

    iview

    一套基于 Vue.js 的高质量 UI 组件库,通过iveiw可以快速的开发出风格一致的前端界面。

    node.js安装:

    打开cmd 输入下面的命令查看是否成功安装

    node -v

    npm -v

    安装vue脚手架工具

    首先安装npm的淘宝镜像(下载速度比较快),打开idea的Terminal

    输入以下的命令

    npm i -g cnpm --registry=https://registry.npm.taobao.org

    等待下载完成以后,继续安装vue的脚手架工具,在Terminal内继续输入以下命令

    npm i -g vue-cli

    测试是否安装成功:

    vue -V

    脚手架安装完成后,初始化包结构,继续输入

    1、vue init webpack myproject

    Install vue-router?

    是否安装 vue 路由组件,做项目的话一定要安装

    Use ESLint to lint your code?

    是否需要使用 ESLint 模块进行代码检测

    Setup e2e tests with Nightwatch?

    是否安装端到端的测试

    安装成功界面

    目录结构解析 

    目录/文件说明

    build项目构建(webpack)相关代码

    config配置目录,包括端口号等。我们初学可以使用默认的。

    node_modulesnpm 加载的项目依赖模块

    src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    assets: 放置一些图片,如logo等。

    components: 目录里面放了一个组件文件,可以不用。

    App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。

    main.js: 项目的核心文件。

    static静态资源目录,如图片、字体等。

    test初始测试目录,可删除

    .xxxx文件这些是一些配置文件,包括语法配置,git配置等。

    index.html首页入口文件,你可以添加一些 meta 信息或统计代码啥的。

    package.json项目配置文件。

    README.md项目的说明文档,markdown 格式

    修改js校验规则:

    "space-before-function-paren":0,

    相关文章

      网友评论

          本文标题:vue项目

          本文链接:https://www.haomeiwen.com/subject/nqyosltx.html