vue学习笔记01

使用vscode配置vue项目

---

因为之前我没有接触过vue.js，以前的网页也是用Thymeleaf或者jsp写的，这次要求用vscode写vue,感觉现在前端招聘需求量最大的也是这个技术，刚好自己也想学一下这个，就摸索会写写随笔。

一、配置环境

在官网下载vscode,安装完再把语言改成中文的。

按ctrl+Shift+X进入插件商店，安装和vue有关的两个插件vetur(文件高亮)和ESLint(代码格式规范).

在文件-首选项-设置 找到用户设置配置设置信息：

"emmet.syntaxProfiles": {"vue-html":"html","vue":"html"

}

"javascript","javascriptreact","html","vue" ],"eslint.options": {"plugins": ["html"]

},

---

创建vue项目

一：首先要保证自己的电脑装了node.js,安装完了才可以使用。下载node.js一直下一步，安装完成后再控制台输入node-v查看版本号，如果有的话说明安装成功了。npm(JavaScript 世界的包管理工具）集成在node.js中，输入npm -v就看得到npm的版本号。

二：安装cnpm(淘宝的npm),npm的资源在国外，所以有时候安装依赖包会失败，所以需要国内镜像。在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待。

三：安装vue-cli脚手架构建工具

这个是用来构造比较大型的项目，好比工地的脚手架，架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。才刚入门好像还用不到这个，直接在网页上引用vue就可以了...不过也蛮装一下，以后说不准要用。安装命令：npm install -g vue-cli

四：按Ctrl+~打开vscode终端，输入vue init webpack yourProjectName，yourProjectName就是项目名称，然后底下会有一大堆提示，例如确定项目名，作者名，是否用eslint等，全部默认加yes就ok了。

运行vue项目

等上面的都加载完了输入 npm run dev 就可以在http://localhost:8080访问你构造的网页了。如果碰到missing script:dev错误，说明你package.js里面的dev路径和现在所在路径不一样，cd到package.js里面的路径再重新运行就可以了。或者你下载了别人的项目，文件夹package.js里的scripts确实没有dev,就需要你重新npm intall 安装依赖，最后 npm run dev即可，start, build丢失同理。

普通网页嵌入vue

1.使用 script 引入VUE 的包

2.在index.html 页面创建 id=app 的div

3.通过 new Vue 得到一个 vm 的实例,并配置

html中的代码

<div id="app">
        <p>{{a}}</p>
 </div>

js中的代码

var vm=new Vue({
    el:'#app',
    data() {
        return {
            a:'zhangjian'
        }
    },
})

要实现其他的例如表格，下拉框等应该也类似。

vscode直接打开html的插件：

open in browers：使用alt+b运行，或者切换alt+shift+b切换不同浏览器运行，并且可以运行多个界面

view in browers：在自己想打开的htm目录中右键，出现view in browser即可运行打开，但是它只能打开一个界面，每次想运行下一个界面的时候，必须把前面一个界面关掉。