vue第一步

vue安装

下载nodejs

node中文网

1. 设置node的路径

在node的安装目录下 创建node_global和node_cache两个文件夹;
打开cmd,执行
 npm config set prefix "node_global的路径"
 npm config set cache "Dnode_cache的路径"

2. 设置环境变量

用户变量设置：将用户变量中 PATH 的值改成 D:\Program Files\nodejs\node_global，没有PATH，可以直接添加。

系统变量设置：添加变量 NODE_PATH 值为：D:\Program Files\nodejs\node_modules

3. 查看版本

node -v
npm -v
如果npm不是最新版， npm install -g npm 这样就可以更新到最新版本了。

使用淘宝镜像

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

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

这样就可以使用cnpm 命令来安装模块了：

解决无法安装cnpm，cnpm卡顿问题
卡顿问题

项目初始化

1. 安装vue-cli

cnpm install vue-cli -g  全局安装 vue-cli
如果vue不是最新版的的话：
cnpm uninstall -g vue-cli  先卸载
cnpm install -g @vue/cli

vue -V 查看版本

2. 创建项目

vue init webpack ”项目名称“

3. 运行项目

进入所创建的项目的文件夹
cnpm run dev

安装成功！！！

启动项目时可能显示vue.ps1文件报错，那时可以将该文件删除

安装axios

当前项目下terminal：

vue add axios

启动项目时可能会报http://eslint.org/docs/rules/semi Extra这种错

改一下配置，true改成false即可；

导入element-ui模块

接下来的所有指令是在当前项目的目录输入的。

1. 安装loader模块

• cnpm install style-loader -D
• cnpm install css-loader -D
• cnpm install file-loader -D

2. 安装Element-UI模块

- cnpm install element-ui --save

3. 修改 webpack.base.conf.js 的配置

配置完以后，打开项目 ，打开 项目以后，可以先查看 element-ui 是否已经调用，打开 package.json：

"dependencies": {
    "element-ui": "^2.13.2",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

这里有了 “element-ui”：“2.13.3”，我们开始进行下一步配置。

1. 引入element-ui
   打开 src/main.js 添加下面三条语句
   

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

1. 增加 build/webpack.base.conf.js 文件内容

{
        test: /\\\\\\\\.css$/,
        loader:"style!css"
      },
      {
        test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
        loader:"file"
      }

这样就可以使用elemen-ui了；

vue导入bootstrap

1. 下载jQuery

npm install jquery --save-dev

2. 在webpack.base.conf.js中添加如下内容

var webpack = require(‘webpack’)

和

// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”
})
]

如下

'use strict'
var webpack = require('webpack')
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]

3. 然后在main.js中添加内容

import $ from 'jquery'

往下可以验证jq是否导入成功

4. 引入bootstrap

npm install bootstrap --save-dev

安装成功后，能够在package.json文件夹中看到bootstrap这个模块。

“babel-preset-env”: “^1.3.2”,
“babel-preset-stage-2”: “^6.22.0”,
“babel-register”: “^6.22.0”,
“bootstrap”: “^4.5.3”,
“chalk”: “^2.0.1”,
“chromedriver”: “^2.27.2”,
“copy-webpack-plugin”: “^4.0.1”,

这时候需要在main.js中添加如下内容：

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

可能报错：Bootstrap dropdown require Popper.js (https://popper.js.org)。
原因：
Bootstrap 的dropdown插件是依赖popper.js
解决：

npm install --save popper.js