nodeJs + webpack+vue+ element ui 环境安装

川长思鸟来 2021-09-15 01:42 344阅读 0赞

# 一.安装nodeJs #

1.打开NodeJs官网：[https://nodejs.org/en/download/][https_nodejs.org_en_download]  点击下载

2.双击安装，安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\\Program Files\\nodejs”）

3.安装完成后可以使用cmd（win+r然后输入cmd进入）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。

4、npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装。如下图，出现版本提示便OK了。

参考：[ NodeJS、NPM安装配置步骤(windows版本)][NodeJS_NPM_windows]

# 二.安装vue #

1.npm install -g vue-cli

//全局安装vue-cli (vue-cli是vue的脚手架工具，脚手架其实是帮助我们写好vue.js基础代码工具)

2.npm  install -g webpack                          //全局安装webpack

3.npm install -g webpack-dev-server             //安装webpack的本地webserver

4.判断是否vue 和webpack  安装成功 所以只需输入vue -V 和 webpack  -v  查看版本号

注意：如果这时候出现一下图片。是因 webpack4正式发布了,但是当我们安装之后,使用下面的语句来打包的时候,发现打包失败了。所以

![b471af435a1fe63dd8f74400aa367dd6.png][]

大概意思是:cli被移到了一个叫webpack-cli的包里面,请安装webpack-cli 的除了webpack本身使用cli,  
当使用的是npm:npm install webpack-cli -D  
当使用yard:yarn add webpack-cli -D

解决方法:  
1.全局安装一下webpack-cli：npm install webpack-cli -g  
当安装完之后,就能显示版本号了,  
注意点:安装好之后,打包文件的时候必须在webpack.config.js文件里面配置入口出口文件来打包,不然的话会报错.使用的时候尽量还是不要在生产环境使用.官网上也说了一句话:安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。

2.在项目目录下要本地安装webpack-cli -D

npm install webpack-cli -D

# 三.创建新项目 #

1.在E盘创建项目：E:\\practice\_project\\elements-demo (文件名要小写，或者会提示Sorry, name can no longer contain capital letters.)

2.打印cmd

① 找到 E盘：执行 E:

② cd  practice\_project

③vue init webpack elements-demo

④会有一些初始化的设置，如下输入:

Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
       Project name (vue-test)直接回车默认
       Project description (A Vue.js project) 直接回车默认(这个项目是个vuej.js的项目)
       Author 写你自己的名字
      》Runtime + Compiler: recommended for most users 
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere   直接回车默认
    这里选择Runtime + Compiler: recommended for most users；   
    
       Install vue-router?yes   (要用路由?)
       Use ESLint to lint your code? no （这是说你要不要ESlint的语法去监控你的代码,建议不用）
       Set up unit tests、Setup e2e tests with Nightwatch? no (不要走测试的路，这个我觉得无所谓，，因为我每次都是把项目按照要发布的去做的，所以我选no)
        Should we run `npm install` for you after the project has been created? (recommended) 第一个npm (是说项目被创建后，用npm install 来安装依赖，还是选其他的。跟着文档走，所以我选第一个npm)

![5c4285e07ede5a0e8cd89d88ee3fa50b.png][]

参考：[关于vue使用的一些小经验][vue]

⑤.运行：cd elements-demo  进入这一级  
⑥.运行：npm install

⑦.运行：npm run dev

⑧浏览器：http://localhost:8080/\#/

![9a624d0ccaf639f2bcd18252fa0783a2.png][]

# 四.使用vue-cli再一次创建新项目 #

①打开cmd  找到项目要放在那个盘 e:

②执行cd  ylz\_project

③ 执行 vue -V

④执行vue list

⑤vue init webpack elm-app (回答更上面提的问题一样)

注意：这时候如果出错，一直创建不成功的话

有可能是服务器不稳定把，所以安装cnpm

重新打开cmd  运行 npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm -v 测试是否安装成功

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

重新打开cmd  找到项目cd  ylz\_project/elm-app

执行cnpm install

在执行cnpm run dev  就可以啦。

⑥如果没有出错的话，cd elm-app

⑦执行npm install

⑧执行npm run dev  运行项目

# 四.引入Elements ui #

1.打开cmd  找到项目文件

① 找到 E盘：执行 E:

② cd practice\_project\\elements-demo

③npm i element-ui -S

2.打开elements-demo\\src\\main.js 文件  补充红色部分

import Vue from 'vue'  
import App from './App'  
import router from './router'  
import ElementUI from 'element-ui'  
import 'element-ui/lib/theme-chalk/index.css'  
  
Vue.config.productionTip = false  
  
/\* eslint-disable no-new \*/  
Vue.use(ElementUI)  
new Vue(\{   
  el: '\#app',  
  router,  
  components: \{ App \},  
  template: '<App/>'

\})

我是直接这样的，

参考官网：[http://element.eleme.io/\#/zh-CN/component/quickstart][http_element.eleme.io_zh-CN_component_quickstart]

3.测试例如：在src/components/HelloWorld.vue做一下修改

<template>  
      <div class="hello">  
        <h1>{
       { msg }}</h1>  
        <h2>Essential Links</h2>  
        <el-button>默认按钮</el-button>  
        <el-button type="primary">主要按钮</el-button>  
        <el-button type="text">文字按钮</el-button>  
      </div>  
    </template>  
      
    <script>  
    export default {  
      name: 'hello',  
      data () {  
        return {  
          msg: 'Welcome to Your Vue.js App'  
        }  
      }  
    }  
    </script>  
      
      
    <style scoped>  
    h1, h2 {  
      font-weight: normal;  
    }  
      
    ul {  
      list-style-type: none;  
      padding: 0;  
    }  
      
    li {  
      display: inline-block;  
      margin: 0 10px;  
    }  
      
    a {  
      color: #42b983;  
    }  
    </style>

4.运行  npm run dev

![8d9ffa1fa972e1cf197caafb5758b658.png][]

# 五.运行已有项目 #

①打开cmd  找到已存在的项目文件  cd  practice\_project\\elements-demo

② 运行  npm run dev

# 六.补充安装axios +sass+store #

## (1).安装axios(ajax的封装） ##

1.找到项目的时候 还需要 ：npm install --save axios

2.打开elements-demo\\src\\main.js 文件  补充红色部分

import Vue from 'vue'  
import ElementUI from 'element-ui'  
import App from './App'  
import router from './router'  
import axios from 'axios'  
import 'element-ui/lib/theme-chalk/index.css'  
  
  
Vue.config.productionTip = false  
Vue.use(ElementUI)  
Vue.prototype.$http = axios  
  
  
/\* eslint-disable no-new \*/  
  
  
new Vue(\{   
  el: '\#app',  
  router,  
  components: \{ App \},  
  template: '<App/>'  
\})

4.运行项目：npm run dev

5.使用

A. api/api.js

//api.js  数据接口
    import axios from 'axios';
    const ERR_OK = 0;
    
    //获取商家信息
    export const getSeller=()=>{
    	return axios.get('/api/seller').then((response) =>{  
    		response=response.data;
    		if(response.errno === ERR_OK){
    			return response.data;  
    		}  
    	}).catch(function (error) {  
    	    return error;  
    	});  
    }

B.组件中使用

引入：import \{ getSeller\} from '@/assets/api/api';  获取数据

//获取商家信息
    		sellerGet(){
    			getSeller().then((res)=>{
    				this.seller=res;
    			}) 
    		}

## (2).安装sass ##

1.找到这个项目文件 ：安装sass的依赖包

npm install --save-dev sass-loader
    //sass-loader依赖于node-sass
    npm install --save-dev node-sass

注意：必须是找到项目后 执行 语句

2.测试：在app.vue中

![20180322182257784][]

3.运行项目：npm run dev

## (3).安装store ##

1.找到项目的时候 还需要 ：npm install vuex --save

2.main.js文件中导入并注册vuex

//项目状态  vuex

import store from './store/store'

new Vue(\{  
el: '\#app',  
router,  
store,  
components: \{ App \},  
template: '<App/>'  
\})

参考这个安装：[Vue学习笔记进阶篇——vuex安装及使用][Vue_vuex]

3.运行：npm run dev

## (4).引入jq ##

1.找到项目的时候  运行：npm install jquery --save-dev

参考步骤：[vue引入JQ的方法][vue_JQ]

## (5).安装css-loader ##

1.找到项目 运行：npm install css-loader --save-dev

## (6).安装better-scroll ##

1.找到项目 运行： npm install --save better-scroll

## (7).vue项目添加一些触摸事件以及fastclick的支持 ##

①先执行安装fastclick的命令。  
找到项目 运行：npm install fastclick -D

②在main.js中引入，并绑定到body

import FastClick from 'fastclick'
    
    FastClick.attach(document.body)

## (8).vue项目配置了babel-polyfill 兼容低版本浏览 ##

①找到项目 运行：npm install --save babel-polyfill

②在main.js中引入，

import 'babel-polyfill'

## (9).配置jsonp ##

①找到项目 运行：npm install jsonp --save

②使用

首先assets/js/jsonp.js  封装jsonp

//引入jsonp：解决跨域问题
    import originJsonp from 'jsonp'
    
    /** 
    * 封装jsonp 
    * @param {*} url 原始的jsonp第一个参数是url，第二个参数是option，这里为了比较好写参数做了下封装 
    * @param {obj} data 参数
    * @param {*} option jsonp的option
     */
    export default function jsonp(url, data, option) {
    	// 如果url没有？就加一个？拼接
    	url += (url.indexOf('?') < 0 ? '?' : '&') + param(data);
    
    	return new Promise((resolve, reject) => {
    		// 原始jsonp的三个参数，url、option、回调函数
    		originJsonp(url, option, (err, data) => {
    			// 类似node的设计，如果err是null，表示成功，data是后端返回的数据
    		  	if (!err) {
    		    	resolve(data)
    		  	} else {
    		   	   reject(err)
    		  	}
    		})
    	})
    }
    
    //封装  拼接data 到url  的方法
    export function param(data) {
    	let url = ''
    	for (var k in data) {
    		let value = data[k] !== undefined ? data[k] : ''
    		url += '&' + k + '=' + encodeURIComponent(value)
    	}
    	return url ? url.substring(1) : ''
    }

A.获取线上的数据：[QQ音乐][QQ]

## (10).VUE图片懒加载-vue lazyload插件的简单使用 ##

①找到项目 运行：npm install vue-lazyload --save-dev

②在main.js中引入，

import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
        error:'./static/error.png',
        loading:'./static/loading.png'
    })

③使用的时候：

vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 
    <img class="item-pic" v-lazy="newItem.picUrl"/>
    
    或是：
    <template>
      <div class="home">
        <img alt="Vue logo" v-lazy="img"/>
      </div>
    </template>
    
    <script>
    export default {
    	name: 'home',
    	data(){
    		return{
    			img:require('@/assets/logo.png')
    		}
    	}
    }
    </script>

（11）安装mint-ui

①找到项目 运行：cnpm i mint-ui --save

②在main.js中引入，

mport MintUI from 'mint-ui';
    import 'mint-ui/lib/style.css';
    
    Vue.use(MintUI);

参考：[webpack+vue+ element ui +vueX+axios 开发项目注意点及知识点][webpack_vue_ element ui _vueX_axios]

七. 问题

1.什么是chunk-vendors.js文件【[https://www.coder.work/article/6855114][https_www.coder.work_article_6855114]】

`chunk-vendors.js`是捆绑所有不是您自己的模块，而是来自其他方的模块的捆绑包。它们称为第三方模块或供应商模块。通常，它意味着（仅和）来自项目`/node_modules`目录的所有模块。

ie11 不兼容

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[NodeJS_NPM_windows]: http://blog.csdn.net/gao_xu_520/article/details/75243384
[b471af435a1fe63dd8f74400aa367dd6.png]: /images/20210813/fda7922c47d94379a78a203a09408467.png
[5c4285e07ede5a0e8cd89d88ee3fa50b.png]: /images/20210813/f9ae2422c0c44340a400d023d6d87310.png
[vue]: https://www.cnblogs.com/tongjiaojiao/p/8081719.html
[9a624d0ccaf639f2bcd18252fa0783a2.png]: /images/20210813/1d05dae81b0840e6a6e753fa65c85e3e.png
[http_element.eleme.io_zh-CN_component_quickstart]: http://element.eleme.io/#/zh-CN/component/quickstart
[8d9ffa1fa972e1cf197caafb5758b658.png]: /images/20210813/147f4cfda5b44fed98597fac26d87547.png
[20180322182257784]: /images/20210813/dfa69193dacb456c847dbbceb153054a.png
[Vue_vuex]: https://www.jianshu.com/p/f1b19f74fd81
[vue_JQ]: https://blog.csdn.net/MM1098/article/details/78836156
[QQ]: https://blog.csdn.net/well2049/article/details/78558048
[webpack_vue_ element ui _vueX_axios]: https://blog.csdn.net/gao_xu_520/article/details/79686945
[https_www.coder.work_article_6855114]: https://www.coder.work/article/6855114