Vue前端环境简单搭建

秦仙道

于 2020-04-14 20:40:58 发布

阅读量323

点赞数

分类专栏：前端 Vue 前后端分离文章标签： vue.js node.js npm webpack 前端

本文链接：https://blog.csdn.net/qq_38733863/article/details/105476902

版权

前端同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

前后端分离

1 篇文章 0 订阅

订阅专栏

Vue前端环境简单搭建

环境搭建

环境搭建

1.nodejs(运行环境)

简介
Nodejs不是一个js框架，千万不要认为是类似jquery的框架。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，类比java中jvm。
Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
下载地址：https://nodejs.org/en/download/
环境变量检查
安装完成后检查环境变量是否设置node.js的路径，没有的话自己配置上。路径（D:\intellij_IDEA\cheng\nodejs）
最后在DOS窗口内输入[node -v]，这是查看版本的命令，出现先下图先显示，就表示安装成功。

2.npm(下载工具)

介绍
npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。
node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本
设置包路径
1.设置的是npm的下载路径，默认一般会设置在C盘。很多小伙伴们不喜欢在C盘存放，就可以进行修改。可以通过命令[npm config ls]进行路径查看。我的路径在d盘，因为我已经修改过了
2.为了位置统一，先在nodejs中创建文件夹，名称为[npm_cache、npm_modules]

3.执行路径修改命令命令。修改后，可以通过命令[npm config ls]，查看是否修改成功。
```
  npm config set prefix "D:\intellij_IDEA\cheng\nodejs\npm_modules" 
  npm config set cache "D:\intellij_IDEA\cheng\nodejs\npm_cache"
```
4.最后配置npm_modeules的环境变量

3.cnpm(快点的下载工具)

简介
npm默认去国外的镜像下载js包，开发中使用的一般是国内镜像。
有时使用npn下载资源很慢，所以我们安装一个cnpm（淘宝镜像）来加快下载速度
安装
1.全局安装淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安装后，我们可以使用命令[cnpm -v]查看cnpm的版本
3.nrm全局安装：cnpm install -g nrm
4.命令[nrm ls]查看命令已经指向taobao

5.如果没有指向淘宝，使用命令[nrm use taobao]，切换到淘宝镜像中即可

4.webpack(前端资源整理)

简介
webpack可以实现，对多个js文件统一打包为一个js文件。
webpack安装分为本地安装和全局安装
本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。可以通过dos窗口进入安装目录，执行命令。
[ npm install --save-dev webpack 或 cnpm install --save-dev webpack]
指定版本
[cnpm install --save-dev webpack@3.6.0]

全局安装：将webpack安装在本机，也就是安装在npm的目录下，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数。
[npm install webpack -g 或 npm install webpack -g]
指定版本
[npm install --save-dev webpack@3.6.0 或 cnpm install --save-dev webpack@3.6.0]

生成build.js文件
在这里插入图片描述

  1.对需要打包的js文件，进行导出
  module.exports.add=add;或者module.exports={add,add2}
  2.创建main.js,导入需要打包的文件
  var {add} =require("./model01")
  3.最后构建build.js
  webpack main.js build.js

5.webpack-dev-server(网站代码自动刷新、热加载)

简介
webpack-dev-server开发服务器，它的功能可以实现热加载，并且自动刷新浏览器

搭建基础工程
1.创建一个webtest目录，将webpack入门程序的代码拷贝进来，并在目录下创建src目录、dist目录。
在这里插入图片描述
main.js

  var {add} = require("./model")
  var Vue = require("./vue.min")
  var VM = new Vue({
      el:'#app',//vm接管了app区域的管理
      data:{//model数据
          num1:0,
          num2:0,
          result:0,
      },
      methods:{
          change:function () {
              this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
              // this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
              //alert("计算结果："+this.result)
          }
      }
  });

model.js

  	var add = function (x, y) {
  	    return x+y;
  	}
  	var add2 = function (x, y) {
  	    return x+y+2;
  	}
  	module.exports.add = add;

home.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>vue.js常用指令的测试</title>
  </head>
  <body>
  <!--实现在body区域显示一个传智播客名称-->
  <div id="app">
      <!--相当于MVVM的view视图-->
      <!--{{name}}-->
      <a v-bind:href="url">
      <span v-text="name"></span>
      </a>
      <input type="text" v-model="num1"/> +
      <input type="text" v-model="num2"/>=
     <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
      <span v-text="result"></span>
      <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
      <button v-on:click="change">计算</button>
  </div>
  </body>
  <script>
      //编写MVVM中的model部分及VM（ViewModel）部分
  
  </script>
  </html>

注：vue.min.js可自行下载
2.在webtest文件夹下允许命令[cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev]
在这里插入图片描述
3.修改package.json，加入一下代码

  "scripts": {
	"dev": "webpack-dev-server --inline --hot --open --port 5008"
    },

	--inline：自动刷新
	--hot：热加载 
	--port：指定端口 
	--open：自动在默认浏览器打开 
	--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

4.加入webpack.config.js文件

var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        path : __dirname+'/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename:'build.js'		   //输出文件
    },
//     devtool: 'eval-source-map',
    plugins:[
        new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'home.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ],
    devServer: {
        host: '127.0.0.1',
        port: 5008,
      }
};

5.最终文件结构
在这里插入图片描述
6.运行

秦仙道

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue前端环境简单搭建

Vue前端搭建环境搭建1.nodejsNPM安装环境搭建1.nodejs简介Nodejs不是一个js框架，千万不要认为是类似jquery的框架。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，类比java中jvm。Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、...
复制链接

扫一扫

专栏目录