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

最新推荐文章于 2024-06-27 20:02:13 发布

weixin_34221773

最新推荐文章于 2024-06-27 20:02:13 发布

阅读量284

点赞数

文章标签： javascript webpack json ViewUI

原文链接：https://juejin.im/post/5b10978b51882513ea5cabd4

版权

环境配置

首先先安装node环境，如果在windows上，直接去官网下载，选择windows系统(.msi)，下载完成后一路安装就好。安装成功后，windows命令行中会多两个命令，一个是node，一个是npm。node就是启动vue和koa2的关键命令，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-simple比webpack更轻量级，企业会最优先使用。当然，对于这个我不可否认。但是，如果你坚持要用webpack-simple的话，你会发现，当你引入其它第三方模块的css和js的话，你的页面上就会报一大堆错误信息，因为你的webpack.config.js这个文件，中的css和style的loader还没配齐全，你需要去下载，然后，当你解决了这个错误之后，又会有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目录，你可以将js、css、img等静态资源放入此文件夹下。

进入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引入的组件变量名相同
    }
  ]
})
复制代码