Vue2开发大全,nodejs基本知识

By admin in 4858美高梅 on 2019年4月3日

参考资料:

1、使用webstorm编辑器创造1个总结的nodejs服务器(打开一个进度)


//引入http模块
var http = require('http');
//调用http的接口创建服务器,回调——>异步(先打印22222222,再在控制台打印1111111);
var server = http.createServer(function(req,res){    //req:request浏览器提交给服务器相关  res:response;服务器到浏览器
    console.log(1111111);
    //设置编码格式:
    res.write("<head><meta charset='utf-8'/></head>");
    res.end();
})
console.log(22222222);
server.listen(8787);  //8787:表示端口号 ,在浏览器地址栏输入 http://localhost:8787 运行

服务器设置编码格式的讲话有<font color=”red”>三种</font>:

// res.write("<head><meta charset='utf-8'/></head>");
// res.setHeader("Content-type","text/html;charset=utf8");
// res.writeHeader(200,{"Content-type":"text/html;charset=utf8"});  //200是状态码

1,安装node.js

     
到汉语官网http://nodejs.cn/下载安装包,安装达成后可以在dos命令行中输入node
-v
npm -v来检查评定安装版本即可判断是否安装成功,如图:

4858美高梅 1

1、github

vuex element qs.js axios.js
vue promise 关于ES6的Promise的使用深入理解  vue2 设置网页title的问题
Mint UI  webstorm2017激活  深入理解vue中的slot与slot-scope  Handling Static Assets

什么样关闭node进度

先在极端查看进程:

lsof -i tcp:8787

4858美高梅 2

图片.png

Vue2开发大全,nodejs基本知识。PID栏就意味着大家正在运行的进度,node进度PID是8九一
在顶峰输入指令

kill 891

就关门了node进度

<font
color=”red”>注:</font>假如同时运维八个程序。各类程序端口号必须分化,不然会报错,因为七个端口号只好运营3个主次,下边是报错的内容

4858美高梅 3

图片.png

nodejs1个home.js文件引入另2个mytestjs.js文件后,不能够一贯调用mytestjs.js文件之中的函数大概变量

home.js引入mytest.js文件

//必须通过require语句引入
var test = require("./mytestjs.js");   //必须加./
//调用mytestjs.js文件里地myFn函数
test.myFn();   

注:testjs.js里面只可以写命名函数

var myFn = function(){
    console.log("我是myFN函数");
}
var a = "你好";
//导出变量或者函数,被引用的文件智能通过
module.exports = {
    myFn:myFn,
    a:a
}

开拓webstorm的Terminal终端,将commonfn文件夹拖过去,再输入npm
init开端化,一贯Enter,会自动生成package.json配置文件,如下图所示

4858美高梅 4

图片.png

==package.json配置文件之中的字段全解链接==:

http://blog.csdn.net/woxueliuyun/article/details/39294375

2,安装vue-cli

安装完node之后,我们得以全局安装vue-cli,

npm install -g vue-cli     

只是那种设置格局相比慢,推荐使用国内镜像来安装,所以大家先安装 cnpm:

npm install -g cnpm –registry=

如若设置战败,能够应用npm cache
clean清理缓存,然后再重新安装。前面包车型客车设置进程中,如有安装退步的情景,也亟需先清理缓存

一致可以行使cnpm -v查看是或不是安装成功

4858美高梅 5

下一场使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

新型的 vue 项目模板中,都包罗 webpack 插件,所以那里能够不安装 webpack

安装到位后,能够选用vue -V(注意 V 大写)查看是或不是安装成功。

4858美高梅 6

倘使提醒“不只怕辨识 ‘vue’ ” ,有十分大可能率是 npm 版本过低,能够运用 npm install
-g npm 来更新版本

github地址:

 

<font color=”purple”>单独安装有个别插件</font>

比如:安装cookie

npm install cookie

4858美高梅 7

图片.png

卸载cookie

npm uninstall cookie

4858美高梅 8

图片.png

三、生成项目

首先必要在命令行中进入到花色目录,然后输入:

vue init webpack Vue-Project

其间 webpack 是模板名称,能够到 vue.js 的 GitHub
上查看越多的沙盘https://github.com/vuejs-templates

Vue-Project
是自定义的项目名称,命令执行之后,会在脚下目录生成一个以该名称命名的品类文件夹

4858美高梅 9

布署达成后,能够看来目录下多出了多少个连串文件夹,里面正是 vue-cli
成立的三个依据 webpack 的 vue.js 项目

接下来进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

(假如运行cnpm install报错npm ECRUISER揽胜极光! path
E:\workspace\vue\node_modules\js-beautify\js\bin\css-beautify.js,需要在gitHub上下载js-beautify,地址:js-beautify1.7.0地址)

下一场运营项目

npm run dev

即使浏览器打开之后,未有加载出页面,有希望是本土的 8080
端口被挤占,须求修改一下布置文件config>index.js

4858美高梅 10

建议将端口号改为不常用的端口。此外作者还将 build 的路子前缀修改为 ‘ ./
‘(原本为 ‘ / ‘),是因为包装之后,外部引入 js 和 css 文件时,假如路径以
‘ / ‘
开首,在当地是无能为力找到相应文件的(服务器上没难题)。所以①旦供给在本地打开包装后的公文,就得修改文件路径。

2、webpack配置

付出环境:win10 64bit

<font color=”purple”>一步安装项目中装有的插件</font>

1、终端输入指令 npm init ,自动在项目下生成package.json文件

二、终端命令:npm install
会把大家无处目录下项目下的package.json里面必要的插件自动全体下载下来

4858美高梅 11

图片.png

四、打包上线

温馨的花色文件都亟待停放 src 文件夹下

品种开发到位现在,能够输入 npm run build 来展开打包工作

npm run build

包裹完成后,会变卦 dist
文件夹,若是已经修改了文本路径,可以平昔打开当和姑件查看

类别上线时,只需求将 dist 文件夹放到服务器就行了。

4858美高梅 12

(1)基础配置webpack.base.config.js

开发工具:webstorm

<font color=”green”>使用npm安装vue</font>

sudo npm install –global vue-cli
使用npm安装vue脚手架cli ,拥有vue指令

vue -V 查看vue版本号

vue init webpack vuetest 创造多个依照webpack模板的新品类

4858美高梅 13

图片.png

会自动生成1个vuetest文件夹以及中间的文书

4858美高梅 14

图片.png

如果文件下载速度过慢,我们可以进去webstorm将node_modules设置为不扫描,缩小扫描时间,如下:

4858美高梅 15

图片.png

极限运维 npm run dev ,运维”npm run
dev”的时候实施的是build/build.js文件

会取得二个地址

4858美高梅 16

图片.png

将这一个地方在浏览器运转

4858美高梅 17

图片.png


IE浏览器包容性化解方案

消除措施:安装 “babel-polyfill” 即可。

命令:cnpm install –save-dev babel-polyfill 

在入口main.js文件引入:import ‘babel-polyfill’

最后一步,在build文件夹下找到webpack.base.conf.js.

4858美高梅 18

将第9行的剧情替换一下即可。

4858美高梅 19

module.exports = {

entry: {

app: [“babel-polyfill”, “./src/main.js”]

},

const path = require('path');
//处理共用、通用的js
const webpack = require('webpack');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
 //入口文件
 entry: {
  main: './src/main',
  vendors: './src/vendors'
 },
 output: {
  path: path.join(__dirname, './dist')
 },
 module: {
  rules: [
   //vue单文件处理
   {
    test: /\.vue$/,
    use: [{
     loader: 'vue-loader',
     options: {
      loaders: {
       less: ExtractTextPlugin.extract({
        //minimize 启用压缩
        use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
        fallback: 'vue-style-loader'
       }),
       css: ExtractTextPlugin.extract({
        use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
        fallback: 'vue-style-loader'
       })
      }
     }
    }]
   },
   //iview文件夹下的js编译处理
   {
    test: /iview\/.*?js$/,
    loader: 'babel-loader'
   },
   //js编译处理
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
   },
   //css处理
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     //minimize 启用压缩
     use: ['css-loader?minimize', 'autoprefixer-loader'],
     fallback: 'style-loader'
    })
   },
   //less处理
   {
    test: /\.less/,
    use: ExtractTextPlugin.extract({
     use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
     fallback: 'style-loader'
    })
   },
   //图片处理
   {
    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
    loader: 'url-loader?limit=1024'
   },
   //实现资源复用
   {
    test: /\.(html|tpl)$/,
    loader: 'html-loader'
   }
  ]
 },
 resolve: {
  //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
  extensions: ['.js', '.vue'],
  //模块别名定义,方便后续直接引用别名,无须多写长长的地址
  alias: {
   'vue': 'vue/dist/vue.esm.js'
  }
 }
};

node.js

webpack打包

全局安装webpack:

npm install webpack -g

(2)开发环境安排webpack.dev.config.js

npm: node.js下的包管理器。

<font color=”red”>js文件打包</font>

1.修改webpack.config.js

module.exports = {
    //输入文件:当前执行文件的路径/app/index.js(单入口)(待编译)
    entry:__dirname+"/app/index.js",
    //输出文件:(已编译)
    output:{
        path:__dirname+"/build",
        filename:"bundle.js"
    },
    //监视
    watch:true
};

2.新建多少个文件:

==app文件== 待编译

==build文件== 已编译

在webpack路线下:终端输入webpack 目标将输入文件打包到build下

包装成功会在build文件夹下生成2个bundle.js,然后再单入口(index.html)文件之中引入bundle.js就足以

3.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bundle.js"></script>
</head>
<body>
</body>
</html>

4.主入口文件index.js

console.log("我是index.js文件");
require('./index.css');
var res = require("./module1.js");
console.log(res.a);
res.fn();
//处理共用、通用的js
const webpack = require('webpack');
//处理html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//合并配置
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
//fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
//编译前用node生成一个env.js的文件,用来标明当前是开发(development)还是生产环境(production)
fs.open('./src/config/env.js', 'w', function(err, fd) {
 const buf = 'export default "development";';
 fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});
module.exports = merge(webpackBaseConfig, {
 //打包代码的同时生成一个sourcemap文件,并在打包文件的末尾添加//# souceURL,注释会告诉JS引擎原始文件位置
 devtool: '#source-map',
 output: {
  //线上环境路径
  publicPath: '/dist/',
  filename: '[name].js',
  chunkFilename: '[name].chunk.js'
 },
 plugins: [
  //css单独打包
  new ExtractTextPlugin({
   filename: '[name].css',
   allChunks: true
  }),
  //通用模块编译
  new webpack.optimize.CommonsChunkPlugin({
   //提取的公共块的块名称(chunk)
   name: 'vendors',
   //生成的通用的文件名
   filename: 'vendors.js'
  }),
  new HtmlWebpackPlugin({
   //输出文件
   filename: '../index.html',
   //模板文件
   template: './src/template/index.ejs',
   //不插入生成的 js 文件,只是单纯的生成一个 html 文件
   inject: false
  })
 ]
});

webpack:
它首要的用处是通过CommonJS的语法把具有浏览器端需求揭露的静态财富做相应的准备,比如能源的合并和包裹。

<font color=”red”>css样式打包</font>:

1.安装css-loader,style-loader

sudo npm install css-loader style-loader –save

2.index.css

body{
    width: 100%;
    background-color: greenyellow;
}

3.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bundle.js"></script>
</head>
<body>
</body>
</html>

2.修改webpack.config.js

module.exports = {
 module:{
       rules:[{
       //配置正则表达式,查找后缀为.css文件
       test:/\.css$/,
       // 配置加载器,用!符号级联
       use: ['style-loader', 'css-loader'],
     }]
    }
}

(三)线上环境布署webpack.prod.config.js

vue-cli: 用户生成Vue工程模板。

<font color=”blue”>创设地面服务器</font>

1.安装:npm install –save-dev webpack-dev-server

2.配置webpack.config.js文件

devServer: {
        contentBase: "./build",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
      }

3.在webpackage里面包车型客车package.json中的scripts对象中添加如下命令,用以开启本地服务器,假使webpack里面未有package.json文件,这就新建一个

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack",
        "server": "webpack-dev-server --open"
      }

四.要是是新建的就推行以下上面包车型大巴指令,wenpack路径下终端履行

sudo cnpm install webpack-dev-server

到那里当地服务器就构建成功了


//处理共用、通用的js
const webpack = require('webpack');
//处理html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//合并配置
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
//fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
//编译前用node生成一个env.js的文件,用来标明当前是开发(development)还是生产环境(production)
fs.open('./src/config/env.js', 'w', function (err, fd) {
 const buf = 'export default "production";';
 fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
});
module.exports = merge(webpackBaseConfig, {
 output: {
  //线上环境路径
  publicPath: 'dist/',
  filename: '[name].[hash].js',
  chunkFilename: '[name].[hash].chunk.js'
 },
 plugins: [
  new ExtractTextPlugin({
   //css单独打包
   filename: '[name].[hash].css',
   allChunks: true
  }),
  //通用模块编译
  new webpack.optimize.CommonsChunkPlugin({
   //提取的公共块的块名称(chunk)
   name: 'vendors',
   //生成的通用的文件名
   filename: 'vendors.[hash].js'
  }),
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  //js压缩
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  }),
  new HtmlWebpackPlugin({
   //输出文件
   filename: '../index_prod.html',
   //模板文件
   template: './src/template/index.ejs',
   //不插入生成的 js 文件,只是单纯的生成一个 html 文件
   inject: false
  })
 ]
});

安装node.js

拓展:

(4)package.json文件

本书使用的node版本:node-v捌.1一.2-x64

cnpm天猫商城镜像下载表明地方

==4858美高梅 ,https://npm.taobao.org/==
终点根目录 运营

sudo npm install -g

cnpm
–registry=https://registry.npm.taobao.org

成功以往如下:

4858美高梅 20

图片.png

{
 "name": "iview-project",
 "version": "2.1.0",
 "description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.",
 "main": "index.js",
 "scripts": {
 "init": "webpack --progress --config webpack.dev.config.js",
 "dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
 "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
 },
 "repository": {
 "type": "git",
 "url": "git+https://github.com/iview/iview-project.git"
 },
 "author": "Aresn",
 "license": "MIT",
 "dependencies": {
 "vue": "^2.2.6",
 "vue-router": "^2.2.1",
 "iview": "^2.0.0-rc.8"
 },
 "devDependencies": {
 "autoprefixer-loader": "^2.0.0",
 "babel": "^6.23.0",
 "babel-core": "^6.23.1",
 "babel-loader": "^6.2.4",
 "babel-plugin-transform-runtime": "^6.12.0",
 "babel-preset-es2015": "^6.9.0",
 "babel-runtime": "^6.11.6",
 "css-loader": "^0.23.1",
 "extract-text-webpack-plugin": "^2.0.0",
 "file-loader": "^0.8.5",
 "html-loader": "^0.3.0",
 "html-webpack-plugin": "^2.28.0",
 "less": "^2.7.1",
 "less-loader": "^2.2.3",
 "style-loader": "^0.13.1",
 "url-loader": "^0.5.7",
 "vue-hot-reload-api": "^1.3.3",
 "vue-html-loader": "^1.2.3",
 "vue-loader": "^11.0.0",
 "vue-style-loader": "^1.0.0",
 "vue-template-compiler": "^2.2.1",
 "webpack": "^2.2.1",
 "webpack-dev-server": "^2.4.1",
 "webpack-merge": "^3.0.0"
 },
 "bugs": {
 "url": "https://github.com/iview/iview-project/issues"
 },
 "homepage": "https://www.iviewui.com"
}

下载地址:

别的命令:

npm root:查看当前包得安装路径

npm root -g:查看全局的包的设置路径

npm -v:查看npm安装的本子

ps:下边看下怎么样行使webpack打包vue项目?

理所当然,你也可以去官网下载最新版的node.js,官网地址:,要求小心的是下载左侧的稳定版。

一、安装nodejs:使用webpack打包必要采用npm,npm(node package
manager)是nodejs的包管理器,用于node插件管理(包含安装、卸载、管理正视等),所以需求先下载安装nodejs,安装完毕后使用npm
-v查看是或不是安装到位;

双击,进行安装之后,在CMD命令窗体中实行查看。

2、安装cnpm(此步骤为非必须):因为npm安装插件是从国外的网址上下载的,由于互连网影响,很不难就出现非凡,cnpm是一个1体化
npmjs.org 镜像,你能够用此代替官方版本(只读),同步频率近年来为 十二分钟贰次以保障尽量与合法服务联合。 使用npm install -g cnpm
–registry=

C:\windows\system32>node -v
v8.11.2

三、全局安装vue-cli脚手架,npm install -g vue-cli
(不加-g安装到当前目录;加-g安装到系统的node目录),安装达成后选拔vue
-V查看;

node.js中自带了npm,大家再查看下npm,

4、创制一个基于webpack模板的新品类(下载模板);使用 vue init webpack
my-project(项目文件夹名);接下去进行一层层的装置后,就下载好了二个vue模板了;

C:\windows\system32>npm -v
5.6.0

5、cd my-project 进入项目文件夹;使用npm
install命令安装package.json文件里的依赖性,会依照前端项目标依靠关系下载好不非亲非故系的组件,存在项目目录的node_modules文件夹下;

npm安装vue.js

6、安装node_modules重视后,使用命令 npm run dev
运维项目(dev配置在package.json文件中)。

命令:npm install vue -g

总结

此处的-g是指安装到global全局目录去。

以上所述是笔者给我们介绍的Vue工程模板文件
webpack打包,希望对我们享有扶助,如若我们有其余疑问请给自家留言,作者会及时还原大家的。在此也相当多谢大家对剧本之家网址的支撑!

查看版本:

您只怕感兴趣的篇章:

  • webpack vue
    项目打包生成的文本,能源文件报40肆题指标修复方法(计算篇)
  • 一步步教你利用webpack怎么着搭叁个vue脚手架(超详细讲解和注释)
  • webpack搭建vue 项目标步调
  • 详解vue-cli之webpack叁构建完善提速优化
  • 详解最新vue-cli
    2.九.一的webpack存在难题
  • webpack+vue中使用别称路径引用静态图片地址
  • vue+node+webpack环境搭建教程
  • vue+vuecli+webpack中使用mockjs模拟后端数据的示范
  • vue和webpack安装命令详解
C:\windows\system32>vue -V
2.9.3

 若是本人要在E盘的app_codes文件夹下边新建项目,那么大家能够利用CMD跳转到那些目录,然后实施:vue
init webpack vue-mui

 接下来不断的按回车,如下图所示:

4858美高梅 21

最后稍等自然的光阴,运维结果如下:

# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!

> uglifyjs-webpack-plugin@0.4.6 postinstall E:\app_codes\vue-mui\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

vue-mui@1.0.0 E:\app_codes\vue-mui
+-- autoprefixer@7.2.6
| +-- browserslist@2.11.3
...

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none was installed.

# Project initialization finished!
# ========================

To get started:

  cd vue-mui
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack


E:\app_codes>vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。
'vue-cil是vue的脚手架工具。其模板可以通过' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

E:\app_codes>
E:\app_codes>我们首先,需要安装vue-cil。命令如下:
'我们首先,需要安装vue-cil。命令如下:' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

并发上述提示,是因为我们未有先安装vue-cli,接下去,大家设置vue-cli

安装vue-cli

npm install vue-cli -g

说明:安装vue脚手架

vue-cil是vue的脚手架工具。其模板能够由此
vuejs-templates来查看。

 此时,大家早已接纳模板新建好了品种,我们去E:\app_codes\vue-mui中得以看出如下所示:

4858美高梅 22

用webstorm打开那个类型,然后运维npm run dev
4858美高梅 23

如上海体育场面所示表示运营成功,然后浏览器中输入地点:

4858美高梅 24

安装vuex

npm install vuex --save

安装axios

npm install axios –save

安装mockjs

npm install mockjs --save-dev

安装element-ui

npm i element-ui -S

实例

何以设置一定的背景图像:

body
  {
  background-image: url(bgimage.gif);
  background-attachment: fixed;
  }

vue2 设置网页title的题材:

vue2.0
能源文件assets和static的分裂:

C:\windows\system32>e:
E:\>cd E:\MyWorkSpace\vueCodes
E:\MyWorkSpace\vueCodes>

继承运维:vue init webpack vue-mui。

运营成功后,会产出如下提示:

added 1132 packages in 95.618s

# Project initialization finished!
# ========================

To get started:

  cd vue-mui
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

Promise兼容IE浏览器

vue中使用的axios中用到了Promise对象,可那几个指标不协助任意IE浏览器,那代表全数IE浏览器都不帮忙接口调用。

 4858美高梅 25

杀鸡取蛋方案:

npm install es6-promise --save

下一场main.js最上边添加代码:

import 'es6-promise/auto'
import "babel-polyfill";

 用 vue-route 的 beforeEach
达成导航守卫(路由跳转前验证登录)

穿梭更新…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有