VUE 搭建、常遇到的问题

VUE小介绍

• VUE基本介绍： 是构建用户界面的渐进式框架； 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
• 框架模式：MVVM
• 优点：

1. 易用（html /css/ js…即可创建应用）
2. 灵活（简单小巧的核心、渐进式，可应对任何规模的应用）
3. 高效（16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化）

VUE需要的环境

1. Nodejs （官网下载：http://nodejs.cn/）

cmd窗口：node -v , npm -v出现版本号即成功

2. npm （Nodejs下的包管理器，国内npm太慢，可以安装一个npm淘宝镜像, cmd窗口输入：npm install -g cnpm –registry=https://registry.npm.taobao.org）
3. webpack
4. 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 文件进行编辑；

1. 文件新建：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命令的一个快捷方式）

2. 集成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 两插件
（未完待续）