壹.第3安装node.js情形 官方网站地址  文本编辑器采用sublime text3 (vs虽然了太大)

2.营造项目

二.一 新建自个儿的项目文件夹 code-x 代号x安顿,放到桌面

2.2 初始化

cd c:\user\duab\desktop\code-x 
npm install -g vue-cli //全局安装vue-cli 脚手架
vue init webpack x-blog //项目名称 x-blog

联手回车 

三 安装vue模板,编写翻译运营

cd x-blog
npm install 
npm run dev

4 驾驭项目布局

永利开户送38元体验金 1

 

├── README.md                       // 项目说明文档
├── node_modules                    // 项目依赖包文件夹
├── build                           // 编译配置文件,一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 项目基本设置文件夹
│   ├── dev.env.js              // 开发配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js             // 编译配置文件
├── index.html                      // 项目入口文件
├── package-lock.json           // npm5 新增文件,优化性能
├── package.json                    // 项目依赖包配置文件
├── src                             // 我们的项目的源码编写文件
│   ├── App.vue                 // APP入口文件
│   ├── assets                      // 初始项目资源目录,回头删掉
│   │   └── logo.png
│   ├── components              // 组件目录
│   │   └── Hello.vue           // 测试组件,回头删除
│   ├── main.js                 // 主配置文件
│   └── router                      // 路由配置文件夹
│       └── index.js            // 路由配置文件
└── static                          // 资源放置目录

永利开户送38元体验金,五 入手更改项目

5.1 改造app.vue文件

我们改动src目录上边包车型地铁App.vue文件,大家项目具备的源委都以依据那个空的视窗来进展的。

出于大家是用的vue-cli脚手架,暗中认可开启了热更新,当大家转移那几个文件夹的时候就能唤醒大家不够模板。

小心:当大家决定改动的时候 那么些连串就恐怕运转不起来了

跟着小编运用scss技巧,在此之前没接触过(回头理解一下)大家需求安装多个npm包来帮衬scss预编写翻译本事

npm install sass-loader -D
npm install node-sass -D

改建之后的app.vue文件如下

永利开户送38元体验金 2

5.② 新扩充部分文本夹

改动成功之后的src文件夹 结构树如下

永利开户送38元体验金 3

 

├── App.vue                         // APP入口文件
├── api                             // 接口调用工具文件夹
│   └── index.js                    // 接口调用工具
├── components                      // 组件文件夹,目前为空
├── config                          // 项目配置文件夹
│   └── index.js                    // 项目配置文件
├── frame                           // 子路由文件夹
│   └── frame.vue                   // 默认子路由文件
├── main.js                         // 项目配置文件
├── page                                // 我们的页面组件文件夹
│   ├── content.vue             // 准备些 cnodejs 的内容页面
│   └── index.vue                   // 准备些 cnodejs 的列表页面
├── router                          // 路由配置文件夹
│   └── index.js                    // 路由配置文件
├── style                           // scss 样式存放目录
│   ├── base                        // 基础样式存放目录
│   │   ├── _base.scss          // 基础样式文件
│   │   ├── _color.scss     // 项目颜色配置变量文件
│   │   ├── _mixin.scss     // scss 混入文件
│   │   └── _reset.scss     // 浏览器初始化文件
│   ├── scss                        // 页面样式文件夹
│   │   ├── _content.scss       // 内容页面样式文件
│   │   └── _index.scss     // 列表样式文件
│   └── style.scss              // 主样式文件
└── utils                           // 常用工具文件夹
    └── index.js                    // 常用工具文件

 

前几天就权且到那,新公司广播发表的第3天,临时没什么活,就写写明天看作品学到的东西

下期预先报告:修复因为大家改动导致项目无法运作的‘bug’

 

相关文章