链接:https://segmentfault.com/a/1190000009160934?_ea=1849098

链接:https://www.jianshu.com/p/2769efeaa10a

链接:https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian-dao-fa-bu

仅仅使用vue然后用webpack进行打包放到服务器的例子,webpeck就是打包发布的,打包后放在dist(distribution的缩写)文件夹下:https://segmentfault.com/a/1190000008722404

Jinkey Intelligence
October 10, 2016

JavaScript

Vue2.0 新手完全填坑攻略——从环境搭建到发布

Vue2 入门,读这篇就够了

Jinkey原创感谢 showonneyubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vue2-example

什么是 Vue

Vue 是一个前端框架,特点是数据绑定

比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值

组件化

页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来

Vue2.0 推荐开发环境

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2

安装环境

打开终端运行以下命令

安装brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 nodejs

brew install nodejs

用 npm install npm@3.10.3 更新 npm 版本报错:

(node:42) fs: re-evaluating native module sources is not supported.

解决办法:在官网下载6.70的安装包再安装一次(刚刚相当于帮你配置好环境变量,现在再安装一次升级到最新的 npm)

  • 好像以前官网的安装包不会自动配置环境变量的,由于我电脑上之前安装过 nodejs 所以环境变量已经配置好了,不知道现在的安装包会不会自动配置环境变量。

Windows 下直接下载安装包即可

获取nodejs模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

安装vue脚手架

npm install vue-cli -g

在硬盘上找一个文件夹放工程用的,在终端中进入该目录

Mac

cd 目录路径

根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>或者创建 vue1.0 的项目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

会有一些初始化的设置,如下输入:Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)Project name (vue-test)直接回车默认Project description (A Vue.js project) 直接回车默认Author 写你自己的名字

cd 命令进入创建的工程目录

工程目录如图所示:

安装项目依赖

一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

启动项目

npm run dev

填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的)

【重点】后来发现这些坑是由于 npm 不是最新的版本3.10.2, 用 npm 3.9.5就会出现以下坑解决办法: 请运行以下命令npm update -g

报错

Error: Cannot find module 'opn'Error: Cannot find module 'webpack-dev-middleware'Error: Cannot find module 'express'Error: Cannot find module 'compression'Error: Cannot find module 'sockjs'Error: Cannot find module 'spdy'Error: Cannot find module 'http-proxy-middleware'Error: Cannot find module 'serve-index'

如果你用的是老版本的 vue-cli 还可能报其他错误,需要更新一下 vue-cli

npm update vue-cli

然后可以查看一下当前全局 vue-cli 的版本

npm view vue-cli

安装一下这个依赖到工程开发环境

cnpm install opn --save-devcnpm install webpack-dev-middleware --save-devcnpm install express --save-devcnpm install compression --save-devcnpm install sockjs --save-devcnpm install spdy --save-devcnpm install http-proxy-middleware --save-devcnpm install serve-index --save-devcnpm install connect-history-api-fallback --save-dev

再启动项目,报错

ERROR in ./src/main.jsModule build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'at Function.Module._resolveFilename (module.js:440:15)at Function.Module._load (module.js:388:25)at Module.require (module.js:468:17)at require (internal/module.js:20:19)at Object. (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)at Module._compile (module.js:541:32)at Object.Module._extensions..js (module.js:550:10)at Module.load (module.js:458:32)at tryModuleLoad (module.js:417:12)at Function.Module._load (module.js:409:3)@ multi mainERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.jsModule not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'@ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37@ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080@ multi main

安装一下 babel-runtime

cnpm install babel-helpers --save-dev

启动项目,再次报错

Module build failed: Error: Cannot find module 'babel-helpers'Module build failed: Error: Cannot find module 'babel-traverse'Module build failed: Error: Cannot find module 'json5'Module build failed: Error: Cannot find module 'babel-generator'Module build failed: Error: Cannot find module 'detect-indent'Module build failed: Error: Cannot find module 'jsesc'

找不到依赖那就再安装一下

cnpm install babel-helpers --save-devcnpm install babel-traverse --save-devcnpm install json5 --save-dev...不写了,请把全部把旧的环境全部清除,更新到最新版本

解决办法概述

遇到

Module build failed: Error: Cannot find module '模块名'

那就安装

cnpm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)cnpm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

终于可以启动项目了

输入完命令会自动启动浏览器,如果默认打开 IE 不行

npm run dev

自动启动浏览器就会看到这 帅帅的界面了。

开始 Vue 之旅

打开 IDE

推荐 Atom 打开项目,需要安装 Vue 语法高亮的插件

使用官网文档学习基础

我们来看官网的一个例子,(中文文档请自行上网搜索)

打开 工程目录下的 App.vuetemplate 写 html,script写 js,style写样式

为了方便叙述,我们把官网例子写在同一个组件内这里有两个坑:第一。一个组件下只能有一个并列的 div,可以这么写,所以复制官网示例的时候只要复制 div 里面的内容就好。

但是不能这样写:

第二。数据要写在 return 里面而不是像文档那样子写

错误的写法:

这样子可以自己啃完官网文档组件之前的部分了。

来玩玩组件

前面讲得基本上都是各种常用组件的数据绑定,下面还得说说的是 Vue 的组件的使用。在工程目录/src下创建component文件夹,并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。

<template>
<div id="firstcomponent">
<h1>I am a title.</h1>
<a> written by {{ author }} </a>
</div>
</template> <script type="text/javascript">
export default {
data () {
return {
author: "微信公众号 jinkey-love"
}
}
}
</script> <style>
</style>

duang... 不能按官网文档那样子叫我做就做,我得先试试再告诉你,我做完效果是这样子的,希望观众做完也是这样子。(迷之微笑 )

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了

 

所以就以这个组件作为主入口,方便 )
第一步,引入。在<script></script>标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

第二步,注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!

export default {
data () {
return {
msg: 'Hello Vue!'
}
},
components: { firstcomponent }
}

第三步,使用。在<template></template>内加上

<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<firstcomponent></firstcomponent>
</div>
</template>

完成后的代码:

这时候看看浏览器上的 http://localhost:8080/ 页面(之前打开过就会自动刷新),如果你没看到效果是因为你没有对 App.vue 和 firstcomponent.vue 进行保存操作,保存后页面会自动刷新。

使用路由搭建单页应用

之前已经通过命令安装了vue-router

cnpm install vue-router --save

webpack.config.js加入别名

resolve: {
alias: {vue: 'vue/dist/vue.js'}
}

为什么要加 alias 配置项?其作用可以在文档中有相应的描述:

修改完之后的webpack.config.js是这样子的:

var path = require('path')
var webpack = require('webpack') module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/,
loader: 'vue'
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}

再按之前的方法写一个组件 secondcomponent.vue

<template>
<div id="secondcomponent">
<h1>I am another page</h1>
<a> written by {{ author }} </a>
<p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>
</div>
</template> <script>
export default {
data() {
return {
author: "微信公众号 jinkey-love",
articles: [],
}
}
}
}
</script> <style>
</style>

这时候修改 main.js,引入并注册 vue-router

import VueRouter from "vue-router";
Vue.use(VueRouter);

并且配置路由规则和 app 启动配置项加上 router,旧版的 router.map 方法在 vue-router 2.0 已经不能用了。修改后的main.js如下:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource' //开启debug模式
Vue.config.debug = true; Vue.use(VueRouter);
Vue.use(VueResource); // 定义组件, 也可以像教程之前教的方法从别的文件引入
const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }
import secondcomponent from './component/secondcomponent.vue' // 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{
path: '/first',
component: First
},
{
path: '/second',
component: secondcomponent
}
]
}) // 现在我们可以启动应用了!
// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
router: router,
render: h => h(App)
}).$mount('#app')

这样子改完再打开浏览器看看。

点击那两个链接试试,会发现<router-view class="view"></router-view>的内容已经展示出来,同时注意浏览器地址已经变更。

另外,也可以把 App.vue 的内容写在 main.js 也是可以的不过不建议这么做

如果你使用 vue1.0和0.7版本的 vue-router,请参照下面这个教程, 他整个系列都不错的,当然仅限于 vue1.0 :

http://guowenfh.github.io/2016/03/28/vue-webpack-06-router/

给页面加点动态数据

这时候的页面都是静态的(数据在写程序的时候已经固定了不能修改),而每个应用基本上都会请求外部数据以动态改变页面内容。对应有一个库叫 vue-resource 帮我们解决这个问题。使用命令行安装

cnpm install vue-resource --save

在 main.js 引入并注册 vue-resource:

import VueResource from 'vue-resource'
Vue.use(VueResource);

我们在 secondcomponent.vue 上来动态加载数据添加一个列表:

<ul>
<li v-for="article in articles">
{{article.title}}
</li>
</ul>

在 data 里面加入数组 articles 并赋值为[]然后在 data 后面加入加入钩子函数 mounted(详细请参照官方文档关于 vue 生命周期的解析),data 和 mount 中间记得记得加逗号

mounted: function() {
this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
headers: { },
emulateJSON: true
}).then(function(response) {
// 这里是处理正确的回调 this.articles = response.data.subjects
// this.articles = response.data["subjects"] 也可以 }, function(response) {
// 这里是处理错误的回调
console.log(response)
});
}

这里使用的是豆瓣的公开 GET 接口,如果接口是跨域的 POST 请求,则需要在服务器端配置:

Access-Control-Allow-Origin: *

这时候运行看看。等一会接口返回数据,咦,数据加载出来了,棒棒哒 !

更多 vue-router 的使用方法可以看

vue-router 0.7http://m.doc00.com/doc/1001004egvue-router 2.0http://router.vuejs.org/zh-cn/index.html

来拯救如此难看的界面

组件、双向绑定、路由、数据请求等基本特性都能用了,写到这里一个单页应用基本上成型了。但是,这几面也太 TM 难看了吧。自己写 UI 框架太费劲?那就上网找一个吧。本来想给大家介绍 Vux 的,因为他用的是微信的 WeUI 设计规范,对于开发微信小程序或者微信内的网页非常和谐,但由于写这篇文章的时候 Vux 还不支持 vue2.0,只能用别的框架了。命令行安装 ElementUI (此处某公司的人应该发红包了...)

cnpm install element-ui@next -S

然后在 main.js 引入并注册

import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

保存,这时候程序报错

Uncaught Error: Module parse failed: /Users//Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)You may need an appropriate loader to handle this file type.

官网文档又有坑了,安装教程也不跟我们说这一步,当我们都是高手了...报错是由于我们引入了index.css这个 CSS 文件,但是 webpack 打包的时候无法识别并转换成 js,所以就需要配置才能读取 css 和字体文件,运行命令安装下面三个东西(如果之前安装过就不需要了)

cnpm install style-loader --save-devcnpm install css-loader --save-devcnpm install file-loader --save-dev

在 webpack.config.js 中的 loaders 数组加入以下配置,记得该加逗号的地方加逗号!

{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/,
loader: "file"
}

修改完的 webpack.config.js 如下

var path = require('path')
var webpack = require('webpack') module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/,
loader: 'vue'
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/,
loader: "file"
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}

给豆瓣的电影列表套个衣服(样式) :

<el-card class="box-card">
<div slot="header" class="clearfix">
<h1 style="line-height: 36px; color: #20A0FF">豆瓣电影排行榜</h2>
</div>
<div v-for="article in articles" class="text item">
{{article.title}}
</div>
</el-card>

打开浏览器,输入网址:

http://localhost:8080/second

列表比之前漂亮多了,你还可以参照 ElementUI 的文档使用更多组件样式

http://element.eleme.io/#/component/layout

编译

npm run build

又报错了...orz

ERROR in build.js from UglifyJsSyntaxError: Unexpected token punc «(», expected punc «:» [build.js:32001,6]

解决办法(21061019 showonne 提交 PR 已合并到主分支)

cnpm install babel-preset-es2015 --save-devcnpm install babel-preset-stage-0 --save-dev

然后在项目目录下创建一个.babelrc文件,内容如下:

{
presets: ['es2015', 'stage-0']
}

或者在webpack.config.js中这里

{
test: /\\\\.js$/,
loader: 'babel',
exclude: /node_modules/
}

加入 presets 配置,修改成下面酱紫:

{
test: /\\\\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {presets: ['es2015', 'stage-0']
}

再次执行 npm run build 就可以了,后来发现直接运行 webpack 命令也是可以打包的

webpack --color --progress

接着把 index.html 和整个 dist 目录丢到服务器就可以了。

如果你觉得这篇文章写得好,不需要打赏,你可以下载我朋友做的一个阅读工具,可以订阅公众号和简书、也可以看大神分享的优秀文章。下载地址:[

Jinkey原创感谢 showonneyubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vue2-example

什么是 Vue

Vue 是一个前端框架,特点是数据绑定

比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值

组件化

页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来

Vue2.0 推荐开发环境

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2

安装环境

打开终端运行以下命令

安装brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 nodejs

brew install nodejs

用 npm install npm@3.10.3 更新 npm 版本报错:

(node:42) fs: re-evaluating native module sources is not supported.

解决办法:在官网下载6.70的安装包再安装一次(刚刚相当于帮你配置好环境变量,现在再安装一次升级到最新的 npm)

  • 好像以前官网的安装包不会自动配置环境变量的,由于我电脑上之前安装过 nodejs 所以环境变量已经配置好了,不知道现在的安装包会不会自动配置环境变量。

Windows 下直接下载安装包即可

获取nodejs模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

安装vue脚手架

npm install vue-cli -g

在硬盘上找一个文件夹放工程用的,在终端中进入该目录

Mac

cd 目录路径

根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>或者创建 vue1.0 的项目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

会有一些初始化的设置,如下输入:Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)Project name (vue-test)直接回车默认Project description (A Vue.js project) 直接回车默认Author 写你自己的名字

cd 命令进入创建的工程目录

工程目录如图所示:

安装项目依赖

一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

启动项目

npm run dev

填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的)

【重点】后来发现这些坑是由于 npm 不是最新的版本3.10.2, 用 npm 3.9.5就会出现以下坑解决办法: 请运行以下命令npm update -g

报错

Error: Cannot find module 'opn'Error: Cannot find module 'webpack-dev-middleware'Error: Cannot find module 'express'Error: Cannot find module 'compression'Error: Cannot find module 'sockjs'Error: Cannot find module 'spdy'Error: Cannot find module 'http-proxy-middleware'Error: Cannot find module 'serve-index'

如果你用的是老版本的 vue-cli 还可能报其他错误,需要更新一下 vue-cli

npm update vue-cli

然后可以查看一下当前全局 vue-cli 的版本

npm view vue-cli

安装一下这个依赖到工程开发环境

cnpm install opn --save-devcnpm install webpack-dev-middleware --save-devcnpm install express --save-devcnpm install compression --save-devcnpm install sockjs --save-devcnpm install spdy --save-devcnpm install http-proxy-middleware --save-devcnpm install serve-index --save-devcnpm install connect-history-api-fallback --save-dev

再启动项目,报错

ERROR in ./src/main.jsModule build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'at Function.Module._resolveFilename (module.js:440:15)at Function.Module._load (module.js:388:25)at Module.require (module.js:468:17)at require (internal/module.js:20:19)at Object. (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)at Module._compile (module.js:541:32)at Object.Module._extensions..js (module.js:550:10)at Module.load (module.js:458:32)at tryModuleLoad (module.js:417:12)at Function.Module._load (module.js:409:3)@ multi mainERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.jsModule not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'@ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37@ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080@ multi main

安装一下 babel-runtime

cnpm install babel-helpers --save-dev

启动项目,再次报错

Module build failed: Error: Cannot find module 'babel-helpers'Module build failed: Error: Cannot find module 'babel-traverse'Module build failed: Error: Cannot find module 'json5'Module build failed: Error: Cannot find module 'babel-generator'Module build failed: Error: Cannot find module 'detect-indent'Module build failed: Error: Cannot find module 'jsesc'

找不到依赖那就再安装一下

cnpm install babel-helpers --save-devcnpm install babel-traverse --save-devcnpm install json5 --save-dev...不写了,请把全部把旧的环境全部清除,更新到最新版本

解决办法概述

遇到

Module build failed: Error: Cannot find module '模块名'

那就安装

cnpm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)cnpm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

终于可以启动项目了

输入完命令会自动启动浏览器,如果默认打开 IE 不行

npm run dev

自动启动浏览器就会看到这 帅帅的界面了。

开始 Vue 之旅

打开 IDE

推荐 Atom 打开项目,需要安装 Vue 语法高亮的插件

使用官网文档学习基础

我们来看官网的一个例子,(中文文档请自行上网搜索)

打开 工程目录下的 App.vuetemplate 写 html,script写 js,style写样式

为了方便叙述,我们把官网例子写在同一个组件内这里有两个坑:第一。一个组件下只能有一个并列的 div,可以这么写,所以复制官网示例的时候只要复制 div 里面的内容就好。

但是不能这样写:

第二。数据要写在 return 里面而不是像文档那样子写

错误的写法:

这样子可以自己啃完官网文档组件之前的部分了。

来玩玩组件

前面讲得基本上都是各种常用组件的数据绑定,下面还得说说的是 Vue 的组件的使用。在工程目录/src下创建component文件夹,并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式和前面学到的知识写一个组件。

<template>
<div id="firstcomponent">
<h1>I am a title.</h1>
<a> written by {{ author }} </a>
</div>
</template> <script type="text/javascript">
export default {
data () {
return {
author: "微信公众号 jinkey-love"
}
}
}
</script> <style>
</style>

duang... 不能按官网文档那样子叫我做就做,我得先试试再告诉你,我做完效果是这样子的,希望观众做完也是这样子。(迷之微笑 )

然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了

 

所以就以这个组件作为主入口,方便 )
第一步,引入。在<script></script>标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

第二步,注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。记得中间加英文逗号!!!

export default {
data () {
return {
msg: 'Hello Vue!'
}
},
components: { firstcomponent }
}

第三步,使用。在<template></template>内加上

<template>
<div id="app">
[站外图片上传中……(1)]
<h1>{{ msg }}</h1>
<firstcomponent></firstcomponent>
</div>
</template>

完成后的代码:

这时候看看浏览器上的 http://localhost:8080/ 页面(之前打开过就会自动刷新),如果你没看到效果是因为你没有对 App.vue 和 firstcomponent.vue 进行保存操作,保存后页面会自动刷新。

使用路由搭建单页应用

之前已经通过命令安装了vue-router

cnpm install vue-router --save

webpack.config.js加入别名

resolve: {
alias: {vue: 'vue/dist/vue.js'}
}

为什么要加 alias 配置项?其作用可以在文档中有相应的描述:

修改完之后的webpack.config.js是这样子的:

var path = require('path')
var webpack = require('webpack') module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/,
loader: 'vue'
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}

再按之前的方法写一个组件 secondcomponent.vue

<template>
<div id="secondcomponent">
<h1>I am another page</h1>
<a> written by {{ author }} </a>
<p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>
</div>
</template> <script>
export default {
data() {
return {
author: "微信公众号 jinkey-love",
articles: [],
}
}
}
}
</script> <style>
</style>

这时候修改 main.js,引入并注册 vue-router

import VueRouter from "vue-router";
Vue.use(VueRouter);

并且配置路由规则和 app 启动配置项加上 router,旧版的 router.map 方法在 vue-router 2.0 已经不能用了。修改后的main.js如下:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource' //开启debug模式
Vue.config.debug = true; Vue.use(VueRouter);
Vue.use(VueResource); // 定义组件, 也可以像教程之前教的方法从别的文件引入
const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }
import secondcomponent from './component/secondcomponent.vue' // 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{
path: '/first',
component: First
},
{
path: '/second',
component: secondcomponent
}
]
}) // 现在我们可以启动应用了!
// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
router: router,
render: h => h(App)
}).$mount('#app')

这样子改完再打开浏览器看看。

点击那两个链接试试,会发现<router-view class="view"></router-view>的内容已经展示出来,同时注意浏览器地址已经变更。

另外,也可以把 App.vue 的内容写在 main.js 也是可以的不过不建议这么做

如果你使用 vue1.0和0.7版本的 vue-router,请参照下面这个教程, 他整个系列都不错的,当然仅限于 vue1.0 :

http://guowenfh.github.io/2016/03/28/vue-webpack-06-router/

给页面加点动态数据

这时候的页面都是静态的(数据在写程序的时候已经固定了不能修改),而每个应用基本上都会请求外部数据以动态改变页面内容。对应有一个库叫 vue-resource 帮我们解决这个问题。使用命令行安装

cnpm install vue-resource --save

在 main.js 引入并注册 vue-resource:

import VueResource from 'vue-resource'
Vue.use(VueResource);

我们在 secondcomponent.vue 上来动态加载数据添加一个列表:

<ul>
<li v-for="article in articles">
{{article.title}}
</li>
</ul>

在 data 里面加入数组 articles 并赋值为[]然后在 data 后面加入加入钩子函数 mounted(详细请参照官方文档关于 vue 生命周期的解析),data 和 mount 中间记得记得加逗号

mounted: function() {
this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
headers: { },
emulateJSON: true
}).then(function(response) {
// 这里是处理正确的回调 this.articles = response.data.subjects
// this.articles = response.data["subjects"] 也可以 }, function(response) {
// 这里是处理错误的回调
console.log(response)
});
}

这里使用的是豆瓣的公开 GET 接口,如果接口是跨域的 POST 请求,则需要在服务器端配置:

Access-Control-Allow-Origin: *

这时候运行看看。等一会接口返回数据,咦,数据加载出来了,棒棒哒 !

更多 vue-router 的使用方法可以看

vue-router 0.7http://m.doc00.com/doc/1001004egvue-router 2.0http://router.vuejs.org/zh-cn/index.html

来拯救如此难看的界面

组件、双向绑定、路由、数据请求等基本特性都能用了,写到这里一个单页应用基本上成型了。但是,这几面也太 TM 难看了吧。自己写 UI 框架太费劲?那就上网找一个吧。本来想给大家介绍 Vux 的,因为他用的是微信的 WeUI 设计规范,对于开发微信小程序或者微信内的网页非常和谐,但由于写这篇文章的时候 Vux 还不支持 vue2.0,只能用别的框架了。命令行安装 ElementUI (此处某公司的人应该发红包了...)

cnpm install element-ui@next -S

然后在 main.js 引入并注册

import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

保存,这时候程序报错

Uncaught Error: Module parse failed: /Users//Desktop/vue2/node_modules/.1.0.0-rc.5@element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)You may need an appropriate loader to handle this file type.

官网文档又有坑了,安装教程也不跟我们说这一步,当我们都是高手了...报错是由于我们引入了index.css这个 CSS 文件,但是 webpack 打包的时候无法识别并转换成 js,所以就需要配置才能读取 css 和字体文件,运行命令安装下面三个东西(如果之前安装过就不需要了)

cnpm install style-loader --save-devcnpm install css-loader --save-devcnpm install file-loader --save-dev

在 webpack.config.js 中的 loaders 数组加入以下配置,记得该加逗号的地方加逗号!

{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/,
loader: "file"
}

修改完的 webpack.config.js 如下

var path = require('path')
var webpack = require('webpack') module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.vue$/,
loader: 'vue'
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\?]?.*)$/,
loader: "file"
},
{
test: /\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}

给豆瓣的电影列表套个衣服(样式) :

<el-card class="box-card">
<div slot="header" class="clearfix">
<h1 style="line-height: 36px; color: #20A0FF">豆瓣电影排行榜</h2>
</div>
<div v-for="article in articles" class="text item">
{{article.title}}
</div>
</el-card>

打开浏览器,输入网址:

http://localhost:8080/second

列表比之前漂亮多了,你还可以参照 ElementUI 的文档使用更多组件样式

http://element.eleme.io/#/component/layout

编译

npm run build

又报错了...orz

ERROR in build.js from UglifyJsSyntaxError: Unexpected token punc «(», expected punc «:» [build.js:32001,6]

解决办法(21061019 showonne 提交 PR 已合并到主分支)

cnpm install babel-preset-es2015 --save-devcnpm install babel-preset-stage-0 --save-dev

然后在项目目录下创建一个.babelrc文件,内容如下:

{
presets: ['es2015', 'stage-0']
}

或者在webpack.config.js中这里

{
test: /\\\\.js$/,
loader: 'babel',
exclude: /node_modules/
}

加入 presets 配置,修改成下面酱紫:

{
test: /\\\\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {presets: ['es2015', 'stage-0']
}

再次执行 npm run build 就可以了,后来发现直接运行 webpack 命令也是可以打包的

webpack --color --progress

接着把 index.html 和整个 dist 目录丢到服务器就可以了。

如果你觉得这篇文章写得好,不需要打赏,你可以下载我朋友做的一个阅读工具,可以订阅公众号和简书、也可以看大神分享的优秀文章。下载地址:https://itunes.apple.com/us/app/you-duuread-zhi-gei-xiang/id1175225244

发表评论
撰写评论
  • 2017-10-12 20:36:18

    ssssssssssssssssssssssssssssssssssssssssssssssssssssss

© 2017 Jinkey IntelligencePowered by Jinkey . Friendly link Uread

node+vue-cli+webpack搭建教程的更多相关文章

  1. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  2. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  3. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  4. vue cli 框架搭建

    =============== 通知: 博主已迁至<掘金>码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a8 ...

  5. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  6. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  7. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  8. Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案(以Apache为例)

    vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...

  9. vue+django+webpack搭建

    一.前言 最近接手了一个项目,后端是django,前端是django自带的模板,用的是jinja2,写了一段时间发现用起来特别不顺手,于是想在保持现有的模板基础上,引入vue框架,这样同事可以继续用自 ...

随机推荐

  1. windows sdk编程为应用程序添加图标

    #include <windows.h> /*消息处理函数声明*/ HRESULT CALLBACK WindowProc(HWND hwnd, UINT message, WPARAM ...

  2. Analysis Of The Causes Of Internal Symmetry Of Hydraulic Motor

    The main reasons why hydraulic motors have this symmetrical internal structure are as follows: The   ...

  3. Dash Speed

    题目大意: 比特山是比特镇的飙车圣地.在比特山上一共有n 个广场,编号依次为1 到n,这些广场之间通过n - 1 条双向车道直接或间接地连接在一起,形成了一棵树的结构.因为每条车道的修建时间以及建筑材 ...

  4. Mongo索引学习笔记

    索引使用场景 优:加快查询速度 劣:增删改会产生额外的开销.占用空间 tips: 返回集合中一半以上的数据,全表扫描的效率高 索引基础 基础操作 查看索引:db.test.getIndexes() 创 ...

  5. Poj 2187 旋转卡壳

    Poj 2187 旋转卡壳求解 传送门 旋转卡壳,是利用凸包性质来求解凸包最长点对的线性算法,我们逐渐改变每一次方向,然后枚举出这个方向上的踵点对(最远点对),类似于用游标卡尺卡着凸包旋转一周,答案就 ...

  6. jQuery调用WCF 说明

    在项目中用过一些WCF的技术这篇文章是对以前用过的一点东西的一个梳理 一,webconfig的配置除了一般的配置外,与WCF相关的配置如下 <system.serviceModel>    ...

  7. Android 笔记一:线性布局

    建立布局 新建项目后,在如图路径下新建xml文件可以开始编辑 weight的使用 android:layout_width="0dp",或android:layout_width= ...

  8. sql判断以逗号分隔的字符串中是否包含某个字符串--------MYSQL中利用select查询某字段中包含以逗号分隔的字符串的记录方法

    sql判断以逗号分隔的字符串中是否包含某个字符串---------------https://blog.csdn.net/wttykj/article/details/78520933 MYSQL中利 ...

  9. Web框架django基础篇

    基本配置及学习  路由(Urls).视图(Views).模板(Template).Model(ORM). 简介 Django 是一个由 Python 写成的开放源代码的 Web 应用框架.它最初是被开 ...

  10. UI & 原型

    UI & 原型 产品原型设计与团队实时协作平台 https://www.xiaopiu.com/download https://www.xiaopiu.com/forum/posts/5b9 ...