VUE小介绍
- VUE基本介绍: 是构建用户界面的渐进式框架; 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
- 框架模式:MVVM
- 优点:
- 易用(html /css/ js…即可创建应用)
- 灵活(简单小巧的核心、渐进式,可应对任何规模的应用)
- 高效(16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化)
VUE需要的环境
- Nodejs (官网下载:http://nodejs.cn/)
cmd窗口:node -v , npm -v出现版本号即成功
- npm (Nodejs下的包管理器,国内npm太慢,可以安装一个npm淘宝镜像, cmd窗口输入:npm install -g cnpm –registry=https://registry.npm.taobao.org)
- webpack
- vue-cli (用户生成项目模板,cmd窗口输入:npm install -g vue-cli)
使用VSCode搭建vue项目的相关配置参考:https://blog.csdn.net/liuxufeijidian/article/details/82080834
vue使用
打开VScode后,在扩展那里下载项目需要的插件:
Chinese语言包、one Dark Pro、HTML/CSS/JS、open in broser、view in browser;右下角出现设置语言为中文的提示时, 就点击yes ;若没出现: ctrl + shift +p ,选择Configure xx Language ,在locale.json里修改语言为中文,“locale”:“zh-cn”(将冒号后的删掉会出现提示可选的语言)
为了能在浏览器里查看运行结果
install 完 open in browser 和 view in browser , 到 文件=》首选项=》设置=》用户设置 里找到 setting.json 文件进行编辑;
- 文件新建:Ctrl +` 调出终端控制台,在终端窗口输入:vue init webpack foldername,接下来回车,完成后输入:cd foldername 回车=》再输入:npm run dev (项目文件夹如下)
经常操作的目录为src,需要依赖的资源没有安装,在package.json里面。在cmd窗口里输入:cd 项目文件夹的路径,再输入:cnpm install 进行相关的依赖资源的安装 。
- 装完后,项目文件夹会多一个node_modules文件夹。(webpack的配置文件也已经在build下了)
- 安装完成后,就可以运行整个项目了,在窗口输入:npm run dev 运行项目
(其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式)
- 集成element
- Intstall 依赖 element-ui
在cmd窗口输入:cnpm i element-ui -S (安装完成后,在package.json下会增加element-ui的依赖)
Notice:在安装element-ui时遇到的问题:
(中途还尝试到GitHub下载了gnvm的,把NodeJS更新到最新版本cmd窗口输入:gnvm update latest)
转到项目目录下,cd 项目路径,npm install element-ui -S (用npm install)
- 检查element-ui是否安装成功:
在package.json文件里可以看到element-ui 的版本号;
node_modules文件夹下的element-ui 文件夹;
- 调用element-ui组件
在main.js中引入:
import ElementUI from ‘element-ui’
import element-ui/lib/theme-chalk/index.css
Vue.use(ElementUI)
- 用户设置时,在settins.json里加入以下代码出现错误提示
- 在浏览器里预览发现无法预览
排查原因后发现是没有install : open in browser 、view in browser 两插件
(未完待续)