菜单

澳门皇家赌场利用vue-cli脚手架工具创设项目手续

2019年5月4日 - 皇家前端

说明:安装vue脚手架

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

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

vue -V 查看vue版本号

vue init webpack vuetest 创建叁个基于webpack模板的新类型

澳门皇家赌场 1

图片.png

会自动生成叁个vuetest文件夹以及在那之中的文件

澳门皇家赌场 2

图片.png

若果文件下载速度过慢,大家能够进来webstorm将node_modules设置为不扫描,收缩扫描时间,如下:

澳门皇家赌场 3

图片.png

极限运营 npm run dev ,运维”npm run
dev”的时候推行的是build/build.js文件

会赢得多少个地址

澳门皇家赌场 4

图片.png

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

澳门皇家赌场 5

图片.png


三、生成项目

第叁须要在指令行中进入到花色目录,然后输入:

vue init webpack Vue-Project

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

Vue-Project
是自定义的项目名称,命令实行之后,会在当下目录生成八个以该名称命名的项目文件夹

澳门皇家赌场 6

安顿完结后,能够看来目录下多出了1个连串文件夹,里面纵使 vue-cli
创立的2个根据 webpack 的 vue.js 项目

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

cnpm install

(假诺运营cnpm install报错npm EWrangler智跑! 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

澳门皇家赌场 7

建议将端口号改为不常用的端口。其它作者还将 build 的门路前缀修改为 ‘ ./
‘(原本为 ‘ / ‘),是因为包装之后,外部引进 js 和 css 文件时,要是路线以
‘ / ‘
伊始,在本土是无能为力找到呼应文件的(服务器上没问题)。所以只要急需在该地打开包装后的公文,就得修改文件路线。

2、webpack配置

webpack:
它根本的用途是经过CommonJS的语法把富有浏览器端需求公布的静态财富做相应的备选,比如能源的合并和包裹。

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

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

2.配置webpack.config.js文件

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

三.在webpackage里面包车型地铁package.json中的scripts对象中加多如下命令,用以开启本地服务器,倘若webpack里面没有package.json文件,这就新建3个

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

4.假如是新建的就进行以下上面包车型客车授命,wenpack路线下终端奉行

sudo cnpm install webpack-dev-server

到此处本地服务器就构建成功了


四、打包上线

协和的品类文件都需求安置 src 文件夹下

品种耗费形成之后,能够输入 npm run build 来开始展览包装职业

npm run build

装进达成后,会扭转 dist
文件夹,借使已经修改了文件路线,能够直接张开当守田件查看

品类上线时,只必要将 dist 文件夹放到服务器就行了。

澳门皇家赌场 8

四、创设多少个依照webpack模板的新品类(下载模板);使用 vue init webpack
my-project(项目文件夹名);接下去进行壹多级的设置后,就下载好了一个vue模板了;

# 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。命令如下:' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

<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'],
     }]
    }
}

1,安装node.js

     
到中文官方网站http://nodejs.cn/下载安装包,安装实现后方可在dos命令行中输入node
-v
npm -v来检验安装版本就能够判别是还是不是安装成功,如图:

澳门皇家赌场 9

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

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

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

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

2、终端命令:npm install
会把我们随地目录下项目下的package.json里面须要的插件自动全体下载下来

澳门皇家赌场 10

图片.png

IE浏览器包容性化解方案

缓慢解决格局:安装 “babel-polyfill” 就能够。

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

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

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

澳门皇家赌场 11

将第十行的内容替换一下就能够。

澳门皇家赌场 12

module.exports = {

entry: {

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

},

{
 "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"
}

怎么着设置一定的背景图像:

拓展:

2,安装vue-cli

设置完node之后,大家得以全局安装vue-cli,

npm install -g vue-cli     

唯独这种装置方式相当的慢,推荐应用国内镜像来设置,所以大家先安装 cnpm:

npm install -g cnpm –registry=

壹经设置退步,可以运用npm cache
clean清理缓存,然后再重新安装。前面包车型客车安装进程中,如有安装失利的状态,也亟需先清理缓存

如出1辙可以利用cnpm -v查看是不是安装成功

澳门皇家赌场 13

然后采纳 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

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

安装完结后,能够行使vue -V(注意 V 大写)查看是或不是安装成功。

澳门皇家赌场 14

假诺提醒“不可能辨识 ‘vue’ ” ,有极大可能率是 npm 版本过低,能够利用 npm install
-g npm 来更新版本

一、安装nodejs:使用webpack打包须求接纳npm,npm(node package
manager)是nodejs的包管理器,用于node插件管理(包罗安装、卸载、管理注重等),所以须求先下载安装nodejs,安装完毕后选拔npm
-v查看是还是不是安装到位;

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

1、使用webstorm编辑器创造一个大概的nodejs服务器(张开1个进程)


//引入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是状态码

(三)线上情形安顿webpack.prod.config.js

 

此外命令:

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

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

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

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

什么关闭node进程

先在终端查看进度:

lsof -i tcp:8787

澳门皇家赌场 15

图片.png

PID栏就表示我们正在运行的历程,node进度PID是8九壹
在终点输入指令

kill 891

就关闭了node进度

<font
color=”red”>注:</font>倘若还要运维多少个程序。每一个程序端口号必须分裂,不然会报错,因为3个端口号只可以运营一个程序,上边是报错的始末

澳门皇家赌场 16

图片.png

nodejs2个home.js文件引进另多少个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配置文件,如下图所示

澳门皇家赌场 17

图片.png

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

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

2、安装cnpm(此步骤为非必须):因为npm安装插件是从国外的网站上下载的,由于网络影响,很轻易就现身极度,cnpm是3个完完全全
npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 十秒钟二遍以管教尽量与法定服务同步。 使用npm install -g cnpm
–registry=

开拓工具:webstorm

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

比如:安装cookie

npm install cookie

澳门皇家赌场 18

图片.png

卸载cookie

npm uninstall cookie

澳门皇家赌场 19

图片.png

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

命令:npm install vue -g

webpack打包

大局安装webpack:

npm install webpack -g

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

Promise兼容IE浏览器

vue中使用的axios中用到了Promise对象,可那个目的不帮忙大4IE浏览器,那象征全部IE浏览器都不帮助接口调用。

 澳门皇家赌场 20

缓慢解决方案:

npm install es6-promise --save

下一场main.js最下面增多代码:

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

 用 vue-route 的 beforeEach
完结导航守卫(路由跳转前验证登陆)

不止更新…

cnpmTaobao镜像下载表明地方

==https://npm.taobao.org/==
终极根目录 运行

sudo npm install -g

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

职业有成之后如下:

澳门皇家赌场 21

图片.png

1、github

查看版本:

<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
};

二.新建多个文件:

==app文件== 待编译

==build文件== 已编译

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

装进成功会在build文件夹下生成四个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>

四.主入口文件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 "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
  })
 ]
});

npm安装vue.js

如上所述是小编给大家介绍的Vue工程模板文件
webpack打包,希望对咱们持有辅助,若是大家有其余疑问请给本身留言,作者会及时回复我们的。在此也格外多谢大家对台本之家网站的支撑!

C:\windows\system32>vue -V
2.9.3

你或者感兴趣的小说:

相关文章

发表评论

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

网站地图xml地图