Vue学习系列——项目结构解析（一）

//这里是写法Vue作为一款优秀的前端框架，不容忽视，自然要接触一下。项目分析Vue环境搭建1.安装node.js进入Node.js官网下载。安装，安装后查看版本：node-v#modeversionnpm-v#npmversion2，安装淘宝镜像(cnpm)npminstall-gcnpm--registry=https://registry.npm.taobao。org3，更新npm版本到最新npminstallnpm-g4，全局安装vue-clinpminstall--globalvue-cli创建完成后，我们看一下项目结构：项目结构为很简单：public文件夹：项目入口html文件和项目ico图标src文件：项目根目录（直接存放vue项目根组件和vue项目入口js文件）src下的assects文件：公共资源目录src下的components文件:项目开发的vue组件3.运行项目直接点击运行:在控制台输出访问地址点击使用默认浏览器打开:添加自己的1..vue文件的结构//这里是写法2.自己写vue组件首先写了一个vue组件，里面包含了一个输入框使用输入绑定.p{颜色：红色；尺寸：20px；}然后我需要将我写的页面导入到p.vue项目的根组件中//引入分为三步//1.在script标签中引入组件importFirstPagefrom"@/components/FirstPage";//2.在components中添加上面的组件components名称：{FirstPage}//3.在模板标签中使用这个标签3.重启项目，看到你写的组件已经成功加载到页面上，大功告成！