四、Vue模块化开发
假如遇到vue不是内部命令 1.重新卸载 npm uninstall vue-cli -g 2.重新 npm install -g @vue/cli
vue不是内部命令
build:与打包工具webpack有关的代码 config:配置相关的信息,包括端口之类 node_modules:项目里安装的依赖都在这里 src:我们编写代码的文件夹 static:存放静态文件,比如图片,字体文件等等 babelrc:语法转移相关的配置 index.html:首页内容 package.json:npm依赖包的一些配置信息,每安装一个依赖都会有相关依赖的dependence package-lock.json:每个依赖的详细信息都会列出来
一句话,我们开发期间都安心关注src里面的代码,在src里面编写相应的功能
4.3 Vue运行流程1.首先,项目里面有一个index.html,这是我们的主入口页面,只有一个div它的id是app。
2.在src里面有一个非常重要的文件,main.js,这个就是我们的主程序,这个程序创建了一个Vue实例,它来挂载index.html的app元素。
3.里面有一个router,从当前目录的router文件夹,导入进来的。
4.然后,main.js里面有一个组件components,它从当前目录的./App导入
5.main.js指定了template模板,相当于使用了组件,组件长什么样,index.html就长什么样。
6.App组件包括三个部分,template,script,style
route路由
http://localhost:8081/#/hello
ElementUI
5.1 npm安装elment
File->Preferences->User sneppets
Vue模板
{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: "Print to console": { "prefix": "log", "body": [ "console.log('$1')", "$2" ], "description": "Log output to console" }, "Create VUE template": { "prefix": "vue", "body": [ "", "", "", " $1", "", "", "", "", "", "", "" ], "description": "Create VUE template" } }
官网、教程、视频教程