Vue开发环境搭建
Nodejs与包管理工具安装：
Windows安装：
下载安装包安装就可以。
Ubuntu安装：
//安装nodejs
sudo apt-get install nodejs
//安装包管理工具
sudo apt-get install npm
安装结果确认：
~/dev/devtest$ node --version
v8.11.1
~/dev/devtest$ npm --version
5.8.
快捷通道（Vue-cli方法）：
//设置npm仓库镜像为国内淘宝镜像
npm config set registry https://registry.npm.taobao.org
//查看配置是否成功
npm config get registryf
//全局安装 webpack
npm install -g webpack
//全局安装 vue-cli
npm install -g vue-cli
//创建一个基于webpack模板的项目
vue init webpack my-project cd my-project
npm install
//这一步看着简单，实际上都在配置文件里面配好了，可以去研究一下
npm run dev
自动生成的目录结构：
手动设置：
1，初始化与安装WebPack
// 进入文件夹，初始化设置
npm init -y // Webpack和服务器安装
npm i webpack webpack-cli webpack-dev-server --save-dev
2，添加简单代码测试
webpack.config.js：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, 'dist')
},
}
dist/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Hello World
</body>
</html>
src/index.js 空文件
启动确认：
npx webpack-dev-server
3, 引入Vue
// VUE安装
npm i vue --save // VUE单独文件处理的Loader安装
npm i vue-loader vue-template-complier vue-style-loader css-loader --save-dev
Vue单文件组件与Loader设置
//webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist')
},
plugins: [
new VueLoaderPlugin()
],
devtool: '#eval-source-map'
}
4,Vue单文件组件测试
<!-- dist/index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./bundle.js"></script>
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
// src/index.js import Vue from 'vue';
import App from './components/App.vue'; window.onload = function() {
new Vue({
el: '#app',
template: '<app></app>',
components: { App }
})
}
//src/components/App.vue <template>
<div>
<header-component></header-component>
<p class="blue">This is App component.</p>
</div>
</template> <script>
import Header from './Header.vue'; export default {
components:{
'header-component':Header
}
}
</script> <style>
.blue{
color: blue;
}
</style>
//src/components/Header.vue <template>
<div>
<p class="title">{{title}}</p>
</div>
</template> <script>
export default {
data:function(){
return{
title:'This is Header component'
}
}
}
</script> <style>
.title{
font-size: 20px;
font-weight: bold;
}
</style>
启动服务查看结果：
webpack.config.js说明：
//修改webpack.config.js
var path = require('path');
var webpack = require('webpack'); module.exports = {
entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
output: {
path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
publicPath: '/dist/', // 通过devServer访问路径
filename: 'build.js' // 打包后的文件名
},
devServer: {
historyApiFallback: true,
overlay: true
}
}; //修改package.josn
//webpack-dev-server会自动启动一个静态资源web服务器 --hot参数表示启动热更新
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "webpack --progress --hide-modules"
}, //运行
//浏览器自动打开的一个页面，随意修改js，浏览器会自动刷新
npm run dev //编译
npm run build
Load配置说明：
//webpack默认不支持转码es6，但是import export这两个语法却单独支持
//webpack默认只支持js的模块化，如果需要把其他文件也当成模块引入，就需要相对应的loader解析器//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'
},
devServer: {
historyApiFallback: true,
overlay: true
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}
]
}
}; //匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析 解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
//我们这里用vue开发，所以使用vue-style-loader，其他情况使用style-loader
打包发布：
// 对文件进行压缩，缓存，分离等等优化处理//修改package.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
} //修改webpack.config.js，判断NODE_ENV为production时，压缩js代码
var path = require('path');
var webpack = require('webpack'); module.exports = {
// 省略...
} if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map';
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin(),
])
}
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
Vue开发环境搭建的更多相关文章
- vue开发环境搭建及热更新
写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
- express+mysql+vue开发环境搭建
最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...
- vue开发环境搭建Mac版
一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对 ...
- 【强烈推荐，超详细，实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建
node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...
- vue 开发系列（一） vue 开发环境搭建
概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...
- 最全Vue开发环境搭建
前言 一直想去学Vue,不过一直找不到一个契机.然公司手机端用到了跨平台开发apicloud,里边涉及到Vue组件化开发,例如header和footer的封装,以及apicloud自定义的frame等 ...
- 一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...
- 【VUE】Mac下vue 开发环境搭建，以及目录结构
1 安装Node.js 参看 node.js环境安装 http://www.cnblogs.com/richerdyoung/p/7265786.html 2 安装淘宝镜像 npm install ...
- vscode vue开发环境搭建
以前仅了解过VUE但没有真正上手过,现在因为工作需要准备再近几个月里系统的学习一下这款超火的前端框架,希望大佬们指教. ---------------------------------------- ...
- 【Vue 学习笔记 一、Vue开发环境搭建】
搭建Vue的开发环境 1.首先安装Nodejs (因为我的系统是Windows的所以就选择第一个了,这个看个人的开发环境) 下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于 ...
随机推荐
- 使用Pretues仿真Arduino驱动步进电机
这几天想做一个给金鱼自动喂食的装置,所以学习了下如何操控步进电机,现在做个记录. 使用Pretues仿真Arduino的话,可以参考:http://www.geek-workshop.com/thre ...
- Docker入门教程
一.入门介绍 Docker是一个开源引擎,类似于一个集装箱,开发者通过它可以为任何应用创建一个轻量级.环境无关可移植的容器.开发者在本地编译测试过的容器可以在不同的环境中部署. 通常适用于如下场景: ...
- mysql 实现 sqlserver的row_number over() 方法
1.创建表 CREATE TABLE `heyf_t10` ( `empid` int(11) DEFAULT NULL, `deptid` int(11) DEFAULT NULL, `salary ...
- 2019-04-24-day039-数据库的增查
内容回顾 多积累使用工具的经验 尽量多练习 1.多练几种类型 2.不要照着写好的sql敲,要自己组织语言 内容回顾 存储引擎 innodb : 外键 行级锁(并发修改) 事务(客户管理系统) myis ...
- wpf 事件
事件的本质是 系统消息 再winform中 消息被封装成了事件触发 这种就是 普通事件,特点就是 1对1,以及事件必须能访问到控件 才能绑定 在 wpf中 新概念 路由事件 ,路由区别是 不在是 ...
- Java判断字符串是否有重复
检测是否重复: public static boolean checkDifferent(String iniString) { boolean isbool = false; char[] ch ...
- HML
1.元素分类: 2.浮动: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容 ...
- （转）es6中object.create()和object.assign()
今天学习javascript面向对象,在学习Obejct方法时了解到create方法,偶像想起之前使用的assign方法,顺带查找一番,感觉这篇博客讲解详细,遂转载. 先简单提一下装饰器函数,许多面向 ...
- ps 处理gif
ps打开gif后,做了修改(去掉了背景色),但之后发现本来是动图的gif不动了. 解决该问题需要注意两点: 一:保存时,要选择保存为web格式 二:在ps中打开时间轴,在时间轴中选中某一帧时,只能有多 ...
- TNS-12560,TNS-00583: Valid node checking: unable to parse configuration parameters
测试环境11.2.0.4.0, os系统linux 5.6 单实例,监听文件,启动报错: [oracle@adg1 admin]$ lsnrctl start LSNRCTL for Linux: V ...