Vue--安装脚手架---创建项目

安装脚手架

• 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装脚手架 - 新版脚手架

cnpm i @vue/cli -g
vue create myapp (方式1 - 命令行，选择模块创建项目)
vue ui （方式2，命令行，启动可视化界面创建项目）

• 安装脚手架 - 兼容低版本脚手架

cnpm i @vue/cli-init -g
vue init webpack myapp

• 命令行创建项目
  
  
  
  
  
  
  
  
  
  
  

等待一会.....

说明：如果创建项目不成功，可以拷贝别人创建好的项目，安装依赖即可使用，不要一直创建项目（很费时间）

vue项目目录结构

- node_modules // 项目需要使用的依赖文件
- public // 页面图标等
- src // 我们的主场
- tests // 测试文件
.browserslistrc // 浏览器版本的配置，使用最新的版本
.editorconfig // 编辑器的设置
.eslintrc.js // 代码格式校验的配置
.gitignore // git上传忽略的配置
babel.config.js // babel的配置
cypress.json // 测试的插件配置
jest.config.js // 测试模块的配置
package.json// 项目的描述文件
README.md

src目录结构

- assets // 静态资源文件
- components // 组件
- router // 路由
- store // 状态管理器
- views // 页面
App.vue // 主组件
main.js // 入口文件
registerServiceWorker.js // 生产环境下的一些操作

单文件组件

文件扩展名为 .vue 的 single-file components(单文件组件)

结构 + 表现 + 行为

结构是必须的，表现和行为视情况而定

<template>
    <div></div></template><script lang="">export default {}
</script><style lang=""></style>

script可以添加lang属性，选择 行为的语言 javascript / typescript

style可以添加lang属性，选择 表现的形式 less / scss / stylus

如果需要只针对当前组件添加样式 给style添加一个 scoped 属性

运行项目

cnpm run serve

代码验证基本规则

• 每一行js相关的代码都不需要加 分号
  

• 缩进为两个空格
  
  
  

• 每一个文件最后一行为空行，如果不留这一行
  

• 每两行代码之间的空行不能超过一行
  

• 注释语句 // 后面必须得留一个空格，然后写注释
  

• 每一句代码结束后面不能留空格
  

• 对象 key: value，注意value前加空格
  

• 箭头函数 =>左右加空格
  

• 条件判断语句 if (flag) {}, if后加空格，括号内不加空格，括号后加空格

分析入口文件 main.js

import Vue from 'vue'// const Vue = require('vue')import App from './App.vue'// const App = require('./App.vue')import './registerServiceWorker'// require('./registerServiceWorker')import router from './router'// const router = require('./router')import store from './store'// const store = require('./store')// Vue的项目配置 环境标识 -- 生产环境 - false// 项目上线时将此值改为true
Vue.config.productionTip = false// new Vue实例// ？ 怎么没有el选项 new Vue().$mount('#app')// ？ 怎么没有components注册组件 render: h => h(App)// 用App.vue的模板替换了index.html 中的 <div id="app"></div>new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

修改主页面结构 App.vue

<template>
  <div class="container">
    <div class="box">
        <header class="header">header</header>
        <div class="content">content</div>
    </div>
    <footer class="footer">footer</footer>
  </div></template>

<style lang="scss"></style>

• 设计基本的样式 可以自己写scss 函数实现，也可以使用第三方额 scss 库

• 拷贝 lib 文件至项目的src目录 - 去哪网项目中扒出来的

scss库的使用

引入文件时，文件路径中的@代表的就是src的目录

• 哪里使用哪里就引入 lib/reset.scss;
  

• 矩形的表示方法
  

• 弹性盒布局写法
  
  

• 垂直方向的弹性盒
  
  

• 弹性盒权重设计
  
  

• 内容过多超出 要可以滚动
  
  

• 添加背景颜色
  

• 设置字体颜色
  

了解更多，请查看 lib/classes.scss

<style lang="scss">
@import '@/lib/reset.scss';
.container {
  @include rect(100%, 100%);
  @include flexbox();
  @include flex-direction(column);
  .box {
    @include flex();
    @include rect(100%, auto);
    @include overflow(auto); // 部分浏览器需要加
    @include flexbox();
    @include flex-direction(column);
    .header {
      @include rect(100%, 0.44rem);
      @include background-color(#f66);
      @include color(#fff);
      @include font-size(18px);
    }
    .content {
      @include flex();
      @include rect(100%, auto);
      @include overflow(auto);
    }
  }
  .footer {
    @include rect(100%, 0.5rem);
    @include background-color(#efefef);
  }
}
</style>

创建项目的基本的页面

首页、分类、购物车、我的、详情、登陆、注册、搜索、订单、支付......

• 配置页面底部
  

• 编辑底部的样式
  
  

• 添加字体图标 阿里的图标库
  选择图标-》加入购物车-》添加至项目-》选择font-class->生成在线的css连接，复制到public/index.html处的head内部
  
  

• 给底部添加图标
  

• 调整图标的大小以及字体的大小
  
  

vue的路由

1.配置路由文件

src/router/index.js

配置路由规则

const routes = [
  {
    path: '/home', // 地址栏输入的那个网址
    name: 'home', // 起的名字 -- 命名路由
    // 当前地址栏输入这个网址时，你需要显示的是哪一个页面  
    // 路由的懒加载
    component: () => import('@/views/home/index.vue')
  },
  {
    path: '/kind',
    name: 'kind',
    component: () => import('@/views/kind/index.vue')
  },
  {
    path: '/cart',
    name: 'cart',
    component: () => import('@/views/cart/index.vue')
  },
  {
    path: '/user',
    name: 'user',
    component: () => import('@/views/user/index.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('@/views/register/index.vue')
  }
]

路由对应组件的显示

 

------------------------------------------------------------------文章来自吴大勋（大勋说）链接