vue 概念与使用vue-cli脚手架快速构建项目

vue

vue

定义:是一套构建用户界面的渐进式框架,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.

数据渲染机制:

核心:

  1. 响应式数据绑定(双向数据绑定)   -》利用Object.defineProperty 中的setter/getter代理数据,监控对数据操作所产生的变化

  2. 组合式组件树布局      =》UI页面划分为组件树,相当于划分模块,有利于复用、扩展维护

 具体内部流程图如下:

vue-cli

vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。

vue-cli使用

安装vue-cli之前,需要先安装了vue和webpack,可参考《Vue + Webpack 实现SPA应用文档》


1、安装vue-cli

npm install -g vue-cli                       //全局安装vue-cli
vue init webpack projectName          //生成项目名为projectName的模板,这里的项目名projectName随你自己写
cd projectName                               // 切换到项目目录下
npm install                                      //初始化安装依赖

注意:Mac下安装:需要加权限sudo

sudo npm install -g vue-cli                 //全局安装vue-cli

vue init templateName projectName   //创建一个基于 templateName 模板的新项目 projectName , templateName一般为 webpack

                   // For Vue 1.x use: vue init webpack#1.0 projectName

cd projectName                                // 切换到项目目录下

sudo npm install                              //初始化安装依赖


安装完成OK

生成目录如下:

然后执行

npm run dev                

在浏览器打开http://localhost:8080,则可以看到欢迎页了。


但是这个只能在本地跑,在自己的服务器上访问

npm run build

会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。

进入config/index.js

原来的配置的引用路径为

自己可更改为


这样就能正常访问了。

以上是 vue 概念与使用vue-cli脚手架快速构建项目 的全部内容, 来源链接: utcz.com/z/378808.html

回到顶部