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,

相关文章

  • 14 -vue 打包图片路径错误解决

    一、构建 VUE 项目 直接用官网的方式建立vue 项目 二、打包 VUE 项目 2.1 打包项目介绍 会在项目...

  • vue-cli

    vue init webpack 项目名称 //vue-cli2 创建项目的方式vue create 项目名...

  • 开发速记-typescript篇: vue集成

    安装nix并配置channel: 安装yarn 安装vue 创建vue项目 emacs 编辑项目 启动vue项目

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • Lrave + Vue

    1.创建larave项目 2.创建vue项目vue init webpack 项目名3.打开vue项目,把src下...

  • 1.vue项目-base

    vue项目全了解 1.创建vue项目 1.全局安装vue-cli 2.安装初始项目vue init webpack...

  • Vue.js 初探

    vue 环境安装 vue 项目初始化 vue 项目结构 vue 环境安装 vue需要npm命令安装安装node环境...

  • vue-实战去哪儿项目

    运行项目 npm install npm run dev 项目展示 项目涉及到技术栈: vue:Vue、Vue-r...

  • 【VUE】安装搭建项目vue-cli

    使用 vue-cli 脚手架搭建项目:vue-cli是官方发布的 vue.js 项目脚手架,快速搭建 vue 项目...

  • vue使用心得

    vue项目使用心得 一、项目搭建(vue-cli) 二、项目开发命令 三、项目打包时注意事项 四、vue hist...

网友评论

      本文标题:vue项目

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