VUE 开发 Windows环境配置

一、node.js开发环境

windows系统，去网站https://nodejs.org/en/download/，下载对应的安装程序，并安装Windows Installer (.msi)

1、配置环境变量：

VUE 开发 Windows环境配置

2、验证安装成功：

输入命令：node - v

VUE 开发 Windows环境配置

二、Vue环境

1.安装cnpm淘宝镜像

参照https://npm.taobao.org/

在CMD中运行

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

　　 VUE 开发 Windows环境配置

2.安装Vue脚手架 - 安装Vue命令行工具 vue-cli

在输入淘宝镜像后输入 # 全局安装 vue-cli ，前边安装了cnpm。

可以用cnpm安装vue-cli了

$ cnpm install --global vue-cli

VUE 开发 Windows环境配置

三、创建nuxt.js项目(installation guide:https://zh.nuxtjs.org/guide/installation)

Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。

新手模板

为了便于大家快速使用，Nuxt.js提供了一个 starter 模板。

下载模板的压缩包或利用 vue-cli 安装使用：

$ vue init nuxt-community/starter-template <project-name>

如果 Vue CLI 没有安装, 需先通过 npm install -g @vue/cli @vue/cli-init 来安装。

$ vue init nuxt-community/starter-template <project-name>

然后安装依赖包：

$ cd <project-name>
$ npm install

接着通过以下命令启动项目：

$ npm run dev

应用现在运行在 http://localhost:3000

注意：Nuxt.js 会监听 pages 目录中的文件变更并自动重启，当添加新页面时没有必要手工重启应用。

导入Element UI：

至此，nuxt.js + vue.js就集成完成了，那么，如何使用element-ui呢。

首先，安装element-ui和css-loader、style-loader

$ yarn add element-ui -D $ yarn add css-loader style-loader -D

个人理解，在Nuxt模板下的vue-cli脚手架，是把element-ui视为插件的

所以，我们需要在plugins文件夹中新建一个element-ui.js

// element-ui.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

接下来，到nuxt.config.js中注册这个插件，顺便把loader也引用：

// nuxt.config.js
module.exports = {
  // ... 
  build: {
    // ...
    loaders: [
    // 设置loader
      {
        test: /\.(css)$/,
        loader: 'style-loader!css-loader'
      }
    ]
    //...
  },
  // ...
  // 指向插件
  plugins: ['./plugins/element-ui.js']
  // ...
}

最后，就可以在页面中直接使用element-ui的组件啦

<!-- 一个.vue文件 -->
<template>
  <section class="container">
    <el-button-group>
      <el-button type='primary' icon='arrow-left'>上一页</el-button>
      <el-button type='primary' icon='arrow-right'>下一页</el-button>
    </el-button-group>
  </section>
</template>

VUE 开发 Windows环境配置

新手模板

相关推荐