Vue基础技能【九、vue-cli脚手架】

1、脚手架介绍

1.1、什么是脚手架

• 含义： 书写一个项目最基础的一个目录结构。这个目录中包含了我们需要创建的文件等等。我们可以在这个基础上直接开发。

1.2、安装脚手架

• vue-cli

• 网址：https://cli.vuejs.org/zh/guide/cli-service.html

  // 前提安装了node.js 
  npm  i  vue-cli -g   // 将脚手架全局安装到电脑
  

  • 如果安装慢，可以使用淘宝镜像安装。

    • 首先需要安装淘宝镜像

      // 执行这个命令
      npm install -g cnpm --registry=https://registry.npm.taobao.org
      

    • 检测一下淘宝镜像是否安装成功

      cnpm -v  // 显示版本号代表安装成功，提示不是内部命令说明安装失败
      

    • 以后所有的npm命令安装内容，都可以使用cnpm安装

      npm i  包名  --save/-g
      cnpm i 包名  --save  // 将npm换成cnpm  就会从镜像去下载
      

• 检测安装是否成功

  // 重新打开命令行
  vue -V   // 如果输出版本号说明安装成功，如果 提示Vue不是内部命令，说明安装失败
  

1.3、初始一个Vue项目

// 找到你要存放项目的目录
vue init webpack aaaaa

// 出现如下：
? Project name aaaaa   // 项目名称  回车
? Project description A Vue.js project  // 项目描述   回车
? Author    // 项目作者   回车
? Vue build standalone    // 选择上面那个， 含有“for most user” 那个
? Install vue-router? Yes   // 是否安装路由    回车
? Use ESLint to lint your code? No  //代码检测 No
? Set up unit tests No  // 单元测试    No
? Setup e2e tests with Nightwatch? No   // 测试  No
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)   // 提示你安装包
❯ Yes, use NPM   // 直接使用npm 安装所有需要包
  Yes, use Yarn   // 直接使用yarn安装所有需要包
  No, I will handle that myself   // 等一下，自己操作
  
  
  cd aaaa // 进入该目录
  npm install   // 下载脚手架需要的包，我们可以使用cnpm i
  npm run dev   // 将项目运行起来

2、目录介绍

--| build  // webpack的一些配置文件
----| webpack.base.conf.js  // webpack基础文件
----| webpack.dev.conf.js   // 开发环境下的webpack配置文件
----| webpack.prod.conf.js  // 生成环境下的webpack配置文件
--| config  // 配置文件
--| node_modules   // 依赖包
--| src 	// 开发目录  (前端开发工作都在这里面)
--| static  // 静态文件，  js,css,字体文件等等。    这些静态文件不会被webpack进行打包
--| .babelrc   // babel配置文件   【不操心】
--| .editorconfig  // EsLint 的配置文件  【不操心】
--| .gitignore   // git 忽略的文件  【不操心】
--| .postcssrc.js  // css配置文件
--| index.html   // 这就是单页面。  【重要】 【无需操心】
--| package.json  // 包配置文件  【重要！！！】
--| READEME.md  // 项目说明文件  【不操心】

2.1、开发目录介绍

--| src   // 开发目录
----| assets  // 静态文件。 里面一般存放css,img,其他。  但是这里的文件会被webpack进行打包
----| components  // 组件
--------| xxx.vue   // 一个组件文件
----| router  // 路由
--------| index.js  // 路由文件
----| App.vue   //根组件
----| main.js   // 入口文件

3、文件介绍

3.1、main.js介绍

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'  // 引入Vue
import App from './App'  // 引入根组件 
import router from './router'  // 引入路由

Vue.config.productionTip = false  // 控制台是否显示在哪种开发模式下

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router:router,
  components: { App:App },
  template: '<App/>'
})

3.2、路由文件

import Vue from 'vue'  // 引入Vue
import VueRouter from 'vue-router'  // 引入VueRouter
import HelloWorld from '@/components/HelloWorld'   // 引入某个组件  @代表src

Vue.use(Router)  // 将Router注入到Vue里面去    

//export default 对象   // 暴露一个默认模块
//export default = new Router({
let router = new Router({
  linkActiveClass:"active",
  mode:"hash/history"
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
export default router;  // 暴露

3.3、组件文件

<template>
  <div class="hello">
    	<!--组件模板-->
       123123123
  </div>
</template>

<script>
//export default 组件配置对象
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
  methods:{},
  watch:{},
    // ....
}
</script>
<style scoped>
/**组件样式**/
</style>