阅读 408

node环境搭建和vue-cli脚手架使用详解


环境配置

首先先安装node环境,如果在windows上,直接去官网下载,选择windows系统(.msi),下载完成后一路安装就好。安装成功后,windows命令行中会多两个命令,一个是node,一个是npmnode就是启动vuekoa2的关键命令,npm是一个管理第三方插件的包管理器,负责下载和删除你的模块。

分别运行node -v和npm -v来检测环境是否搭建成功,如果出现以下信息则说明node环境已配置成功!

由于国内访问国外的网站一般都比较卡,而npm又是国外网站,所以我们需要通过npm安装cnpm用以代替npm

npm --registry https://registry.npm.taobao.org install cnpm -g
复制代码

cnpm的用法和npm完全一样,可以通过以下命令来安装

cnpm i 模块名 -S

** i 是 install 命令的简写
** -S 是 --save 的简写,可以将模块信息写入项目根目录下的package.json文件中,package.json就是专门存储模块信息位置的
    一般我们可以用 npm init 或者 cnpm init 初始化package.json配置文件,就会自动在命令所运行的目录下自动生产package.json配置信息
** -g 或则 --global 是全局安装,将模块安装到当前系统用户的node_moudels目录下,全局安装的模块可以在任何目录下使用
复制代码

我们可以使用cnpm i koa -S来安装我们需要的koa模块
在当前目录及当前目录的任何子目录下,可以像这样来引入模块

var koa = require('koa')  
复制代码

当然,vue的环境搭建是非常麻烦的,我们不推荐使用cnpm i这样的方式从根目录一个文件夹一个文件这样方式去创建整个项目,因为这样做你起码会平白无故的浪费半个多小时的时间,把所有的精力都花费在了环境配置的问题上。所以,在这里,我们推荐使用vue的脚手架,来帮我们更简单的搭建整个项目。

全局安装脚手架

cnpm i vue-cli -g
// 脚手架初始化项目
vue init webpack 项目名
复制代码

当然,如果你看到过其他博客或者视频教程,他们有可能会推荐你用webpack-simple,很明显,他们认为webpack-simplewebpack更轻量级,企业会最优先使用。当然,对于这个我不可否认。但是,如果你坚持要用webpack-simple的话,你会发现,当你引入其它第三方模块的cssjs的话,你的页面上就会报一大堆错误信息,因为你的webpack.config.js这个文件,中的cssstyleloader还没配齐全,你需要去下载,然后,当你解决了这个错误之后,又会有image这些图片的格式问题等着需要你去解决,这就会非常麻烦了。为什么我会建议你现在用webpack,因为它会帮你在学习阶段省去很多不必要的麻烦,将你的注意力主要集中在vue框架的设计上,而不是去解决vue脚手架的各种loader问题。

当你运行了vue init webpack demo之后,下面只要一路回车,在出现

的时候,选择第三个,No, I will handle that myself,前面我说过,npm太慢了,而你的windows有可能还没安装yarn,所以你现在先不安装,等你自己去根目录下,自行用cnpm i来用cnpm安装项目所需要的模块。

在当前目录下便会出现这么一个文件夹,demo,这就是你刚刚用vue脚手架创建的vue项目,目录结构如下

    | build             (webpack编译输出js的目录)
    | config            (项目环境的配置文件)
    | index.html        (client端效果展示页面)
    | package.json      (package.json包管理配置文件)
    | README.md         (作者文档,可以忽略)
    | src               (项目文件主目录)
        | App.vue           (主组件,内嵌components文件夹下的所有子组件)
        | main.js           (程序的入口)
        | router            (路由url配置)
            index.js            (路由配置的主入口)
        | components        (子组件目录)
            | HelloWorld.vue    (vue组件)
        | asserts           (资源目录)
            | logo.png
    | static            (静态资源目录)
    | test              (测试文件夹)
复制代码

在有package.json文件的目录下,也就是项目的根目录,运行cnpm i命令,它会自动查找package.json文件中的依赖模块并下载,下载完成后,你将会看到当前目录生成了一个node_mouldes的文件夹,这里面就是存放了你刚刚下载的所有模块,不过这些模块只对当前目录有效,不同于全局安装的模块。

以上众多目录中,我们目前只要关心src目录就可以了。其次是static目录,你可以将jscssimg等静态资源放入此文件夹下。

进入src目录

main.js

import Vue from 'vue'   // 引入vue框架
import App from './App' // 引入App.vue
import router from './router'   // 引入路由配置信息
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false

new Vue({
  el: '#app',   // 组件的id值,div的id为#app时,那么这个div标签就是主组件
  router,   // 路由配置信息
  components: { App },  // 将App.vue作为组件传入
  template: '<App/>'    // 相当于一个标签,以后再html中可以像这样使用<App/>
})   
复制代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
  </head>
  <body>
    <!-- 这个div的id值为main.js中设置的el值,那么这个div就是主组件 -->
    <div id="app"></div>
  </body>
</html>
复制代码

App.vue

<!-- 这里可以写html代码,和引入的vue组件标签 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- router-view 这个很关键,它是用来做路由切换的,它会显示成一个vue视图,它和router文件夹的关系很大 -->
    <router-view/>
    <!-- 在下方的组件被挂载完成之后,这里可以使用,有关vue组件的用法,在以后篇幅会有相关介绍 -->
    <top></top>
    <Nav></Nav>
  </div>
</template>

<script>
// 导出App.vue组件,这里可以写js代码
// 导入vue组件,components文件夹就是我们先前提到过的组件文件夹
import Top from "./components/Top";
import Nav from "./components/Nav";
export default {
  name: 'App',
  /* 
    你可以像这样把组件作为当前组件的子组件挂载到template中最外层的div上,也就是那个id为app的div。
    挂载组件之前请记得要先导入,    
  */
  components: {
    'top': Top,
    Nav,    // 如果在template中要写的名字和这个组件变量名一致,那么这样写就相当于
    // 'Nav': Nav   这种写法,这是es6的新特性,key:value名称如果相同可以简写成一个
  }
}
</script>

<style>
/* 这里可以写css代码 */
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
复制代码

router/index.js

// 引入Vue框架, 因为下面要使用它的use()方法将vue-router这个组件挂在到vue框架上,这样在任何地方就可以方便的使用vue-router这个插件了
import Vue from 'vue'   
/* 
 引入vue-router这个专门用来做路由的插件,这个并不属于vue框架的一部分,他要单独通过cnpm命令去下载。
 不过vue-cli这个脚手架已经帮我们安装好了,是不是挺方便的呢~~
*/
import Router from 'vue-router'
// 在项目创建之后,在components目录下会默认有个HelloWorld.vue的组件,在这里被导入
import HelloWorld from '@/components/HelloWorld'

// 使vue-router这个插件生效,以后this.$route就可以调用vue-router中定义的public属性和方法,因为它已经属于组件的一部分了。
// this就是每个组件script标签下export default{}中的组件对象
Vue.use(Router)

// 导出所有的路由配置信息
export default new Router({
  routes: [
    {
      path: '/',    // 就好像访问了localhost:8080/,App.vue中的<router-view/>这个标签就显示了HelloWorld.vue中的内容一样
      name: 'HelloWorld',   // 以后在组件中通过this.$route.name就可以获取到这个值了,详细介绍请等续更..
      component: HelloWorld // 这个名称要和import引入的组件变量名相同
    }
  ]
})
复制代码

今天的内容就围绕着环境配置这一块讲了,感觉时间有点不够了,完全赶不上计划啊。。

总之先对不住大家了,如果你喜欢的话,请等待续更吧 ~~