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即可运行打开,但是它只能打开一个界面,每次想运行下一个界面的时候,必须把前面一个界面关掉。

posted @ 2019-07-13 16:43  kosupre  阅读(168)  评论(0编辑  收藏  举报