标签：npm full loader webpack vue install js
### Vue.js ## 一、 单文件组件### 1. .vue文件 .vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
.vue文件由三部分组成：<template>、<style>、<script> <template> html </template>
<style> css </style>
<script> js </script>
### 2. vue-loader 浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader 类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等 需要注意的是vue-loader是基于webpack的
### 3. webpack webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理 实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件 简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出
[官网](http://webpack.github.io/)
webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下
### 4. 示例，步骤： #### 4.1 创建项目，目录结构 如下： webpack-demo |-index.html |- src ---- |-main.js 入口文件 ------|-App.vue vue文件 |-package.json 工程文件 |-webpack.config.js webpack配置文件 |-.babelrc Babel配置文件
### 4.2 编写App.vue ```javascript <template> <div id="app"> <h1>{{msg}}</h1> </div> </template>
<script> export default { name: 'app', data () { return { msg: 'Welcome to ruanmou' } } } </script> ```
### 4.3 安装相关模板 npm install vue -S
npm install webpack -D npm install webpack-cli -D cnpm install webpack-dev-server -D npm install vue -D npm install vue-loader -D npm install css-loader -D npm install vue-style-loader -D npm install file-loader -D npm install url-loader -D npm install html-webpack-plugin -D
npm install babel-loader -D npm install @babel/core -D npm install @babel/preset-env -D //根据配置的运行环境自动启用需要的babel插件 npm install vue-template-compiler -D //预编译模板
合并：npm install -D webpack webpack-cli webpack-dev-server vue vue-loader css-loader vue-style-loader file-loader url-loader babel-loader @babel/core @babel/preset-env vue-template-compiler
### 4.4 编写main.js ```javascript /** * 使用ES6语法引入模板 */ import Vue from 'vue' import App from './App.vue'
new Vue({ el:'#app', render:function(h){ //使用render函数渲染组件 return h(App); } });
-------------------------------------------------
/** * 使用ES6语法引入模板 */ import Vue from 'vue' import App from './App.vue' import VueRouter from './router/index.js';
// 第一种写法： index.html里的dom 为app作为模板 // new Vue({ // el:'app', // data:{ // hello:'hello', // msg: 'Welcome to ruanmou' // } // })
//第二种写法：template 模式， 需要compiler去编译成render函数进行渲染页面，性能不是最优 // new Vue({ // el:'app', // data:{ // hello:'hello', // msg: 'Welcome to ruanmou' // },
// // template:`<div id="app1"> // // <h1>{{msg}}</h1> // // </div>`,
// // 改成引用组件就是下面的模式 // components:{ // App //App:App // }, //注册全局组件 // template:'<App/>' // }); //第三种写法：render模式，性能最优 new Vue({ el:'#app', router:VueRouter, data:{ hello:'hello', msg: 'Welcome to ruanmou' }, //创建虚拟Dom,不用组件 // render(createElement){ // return createElement('div',{ // id: "app1", // style:{ // color:'red' // } // },[ // createElement('h1',this.msg), // createElement('span','world') // ]) // }, //使用组件， 利用render函数渲染 render:function(h){ return h(App); }, // render:h => h(App) mounted(){ console.log(this); } });
``` ### 4.5 编写webpack.config.js
```javascript //入口文件 var path = require('path'); var SRC_PATH = path.resolve(__dirname,'./src'); var DIST_PATH = path.resolve(__dirname,'./dist'); const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={ //配置入口文件 entry:SRC_PATH +'/main.js', //配置入口文件输出位置 output:{ path:DIST_PATH, //项目根路径 filename:'[name].js' }, resolve: { //别名 alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, //配置模块加载器 module:{ rules:[ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, { test:/\.vue$/, //所有以.vue结尾的文件都由vue-loader加载 use:'vue-loader' }, { test:/\.js$/, //所有以.js结尾的文件都由babel-loader加载，除了node_modules以外 use:'babel-loader', exclude:/node_modules/ } ] }, // 开发服务器 devServer: { hot: true, // 热更新，无需手动刷新 contentBase: path.resolve(__dirname, './dist/'), //热启动文件所指向的文件路径 host: '0.0.0.0', // host地址 port: 8082, // 服务器端口 historyApiFallback: true, // 该选项的作用所用404都连接到index.html publicPath:'/', //默认设置 proxy: { "/api": "http://localhost:3000" // 代理到后端的服务地址，会拦截所有以api开头的请求地址 } , useLocalIp: true , // open:true, // noInfo:true }, // 插件 plugins: [ new VueLoaderPlugin() ]
} ``` ### 4.6 编写.babelrc
{ "presets":[ [ "@babel/preset-env", { "useBuiltIns": "usage", //按需注入 "corejs": "2", // 声明corejs版本 "targets": { "browsers": [ "> 1%", "last 5 versions", "ie >= 8" ] } } ] ] }
### 4.7 编写package.json ```javascript "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --config webpack.config.js", "build": "webpack --config webpack.config.js" } ``` ### 4.8 运行测试 npm run dev npm run build
### 4.9 理顺8个版本vue的区别(小结)
vue.js ： vue.js则是直接用在<script>标签中的，完整版本，直接就可以通过script引用。 vue.common.js :预编译调试时，CommonJS规范的格式，可以使用require("")引用的NODEJS格式。 vue.esm.js：预编译调试时， EcmaScript Module（ES MODULE)，支持import from 最新标准的。
//---------------------------------------------------------------------- Runtime-only vue.runtime.js ：生产的运行时，需要预编译，比完整版小30%左右，UMD vue.runtime.common.js:生产运行时，commonJS标准。 CommonJS vue.runtime.esm.js：生产运行时，esm标准。 ES Module
https://www.jb51.net/article/147538.htm
### 4.10 配置路由 #### 安装 npm install vue-router -D
#### 配置 新建router/index.js
import Vue from "vue"; import VueRouter from "vue-router";
Vue.use(VueRouter);
import home from '../pages/home.vue'; import news from '../pages/news.vue';
var allRoutes = [{ path:'/home', name:'home', component:home },{ path:'/news', name:'news', component:news }] export default new VueRouter({ routes:allRoutes, mode:'hash', base:'/', // vue-router 认为只有路由真正匹配时，才会加上 exact-active-link 这个 class， // 如果只有一部分重合，就会加上 active-menu。 // fallback // 不是所有浏览器都支持前端路由的方式，如果不支持，设置 fallback: true， // vue 会自动 fallback 到 hash 模式。 fallback: true, linkActiveClass: "active-menu", linkExactActiveClass: "exact-active-menu", })
// 在main.js中把router 实例注入到 vue 根实例中,就可以使用路由了
#### 在main.js里注入 import VueRouter from './router/index.js'; new Vue({ el:'#app', router:VueRouter .... })
#### 在App.vue 里添加链接 ，以及路由导航链接
<template> <div id="app"> <h1>{{msg}}</h1> <div > <!-- <router-link to="/home" tag='li'>主页</router-link> <router-link to="/news" tag='li'>新闻</router-link> --> <ul @click="gotoPage($event)"> <li tag='home'>主页</li> <li tag='news'>新闻</li> </ul> </div> <router-view></router-view> </div> </template>
<script> export default { name: 'app', data () { return { msg: 'Welcome to ruanmou' } }, methods:{ gotoPage(ev){ var target = ev.target, tag = target.getAttribute('tag'); switch(tag){ case 'home': this.$router.push({ path:'/home', query:{ name:'laney' } }) break; case 'news': this.$router.push({ path:'/news', query:{ age:'10' } }) break; } } } } </script>
## 二、 vue-cli脚手架 https://cli.vuejs.org/zh/guide/installation.html
### 1. 简介 版本：2.x vue-cli是一个vue脚手架，可以快速构造项目结构 vue-cli本身集成了多种项目模板： simple 很少简单 webpack 包含ESLint代码规范检查和unit单元测试等 webpack-simple 没有代码规范检查和单元测试 browserify 使用的也比较多 browserify-simple
### 2. 示例，步骤： #### 2.1 安装@vue/cli (vue-cli)，配置vue命令环境 version ---- 2.9.6版本
npm install vue-cli -g 或者 yarn global add vue-cli vue --version vue list
version ---- @vue/cli 4.1.2
npm install -g @vue/cli # OR yarn global add @vue/cli ,或者指定版本安装 yarn global add @vue/cli@3
可以安装一个桥接工具拉取 2.x 模板 (旧版本)
npm install -g @vue/cli-init `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同 vue init webpack-simple webpack-simple-web vue init webpack vue-cli2-demo
全局卸载 ：yarn global remove @vue/cli
#### 2.2 初始化项目，生成项目模板 vue-cli vue-cli 2语法：vue init 模板名 项目名
@vue/cli 3 -4 语法：vue create 项目名
#### 2.3 进入生成的项目目录，安装模块包 cd vue-cli2-demo npm install
#### 2.4 运行 vue-cli版本创建的项目： npm run dev //启动测试服务 npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上
@vue/cli版本 创建的项目 npm run serve //启动开发服务 npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上
ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格 [官网](http://eslint.org)
#### 2.5 使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目：
vue ui
## 三、模块化开发 ### 2. axios模块化 npm install axios -S vue-cli3-demo 项目里 使用axios的两种方式： 方式1：在每个组件中引入axios , import axios from 'axios'; getInfo(){ axios.get('https://api.github.com/users/fly39244080').then((res)=>{ console.log(res); }) } 方式2：在main.js中全局引入axios并添加到Vue原型中
import axios from 'axios'; Vue.prototype.$axios = axios; getInfo(){ this.$axios.get('https://api.github.com/users/fly39244080').then((res)=>{ console.log(res); }) }
### 3. 为自定义组件添加事件
## 二、 Element UI
### 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率 ElementUI PC端 MintUI 移动端
[官网](http://element.eleme.io/)
### 2. 快速上手
#### 2.1 安装elment ui cnpm install element-ui -S
#### 2.2 在main.js中引入并使用组件 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入 Vue.use(ElementUI); 这种方式引入了ElementUI中所有的组件
#### 2.3 在webpack.config.js中添加loader CSS样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader
默认并没有style-loader模块，所以需要单独安装 cnpm install style-loader --save-dev
#### 2.4 使用组件
#### 2.5 使用less 安装loader，需要两个：less、less-loader cnpm install less less-loader -D 在webpack.config.js中添加loader
### 3. 按需引入组
#### 3.1 安装babel-plugin-component cnpm install babel-plugin-component -D
#### 3.2 配置.babelrc文件 "plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" } ]]]
#### 3.3 只引入需要的插件
标签：npm,full,loader,webpack,vue,install,js 来源： https://www.cnblogs.com/laneyfu/p/12342703.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。