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的所以就选择第一个了,这个看个人的开发环境) 下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于 ...
随机推荐
- JAVA作业三
(一)学习总结 1.阅读下面程序,分析是否能编译通过?如果不能,说明原因.应该如何修改?程序的运行结果是什么?为什么子类的构造方法在运行之前,必须调用父 类的构造方法?能不能反过来? class Gr ...
- vmware10.0.1安装redhat linux6.2每次启动vm崩溃问题解决！
最近在学习linux技术,安装了一套redhat linux6.2的环境,里面有软件若干,wmare用的是10.0.1的,最近每次出现登陆界面,输入root登陆后,wm就报错vmui不可恢复错误MEM ...
- Hadoop学习------Hadoop安装方式之(二)：伪分布部署
要想发挥Hadoop分布式.并行处理的优势,还须以分布式模式来部署运行Hadoop.单机模式是指Hadoop在单个节点上以单个进程的方式运行,伪分布模式是指在单个节点上运行NameNode.DataN ...
- 高分一号计算NDVI
1.准备工作 如果想要ENVI友好一点,请下载ENVI5.3,并且安装China satellites 补丁(参考博客:ENVI扩展工具:中国国产卫星支持工具) App Store for ENVI下 ...
- 3D数学基础（四）四元数和欧拉角
一.四元数 四元数本质上是个高阶复数,可视为复数的扩展,表达式为y=a+bi+cj+dk.在说矩阵旋转的时候提到了它,当然四元数在Unity里面主要作用也在于此.在Unity编辑器中的Transfor ...
- Vue中实现与后台的数据交换（vue-resource）
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打 ...
- Visual C++ 6.0中互换两个数字
就好比如两杯水,需要三个杯子将这两杯水互换.互换数字就要用一个中间变量. # include <stdio.h> int main(void) { int i; int j; int k; ...
- nodejs故障cnpm没反应
莫名发生的故障cnpm没反应 重新整理nodejs使用流程 方案1 1.安装64位nodejs 2.设置代理 npm config set proxy http://127.0.0.1:9999 ...
- java-14习题
.使用TreeSet集合生成一个不重复随机数组,该数组包含10个100以内的随机整数.输出该随机数组. import java.util.Iterator; import java.util.Tree ...
- c语言设计实验报告
试验项目:1.字符与ASCLL码 2.运算符与表达式的运用 3.顺序结构应用程序 4.数学函数的算法描述 5.鸡兔同笼的算法描述 6.确定坐标的算法描述 姓名:熊承启 实验地点:514实验室 1.字符 ...