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的所以就选择第一个了,这个看个人的开发环境) 下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于 ...
随机推荐
- ListView嵌套ScrollView会出现的问题
1.出现的问题:ListView高度显示不对,滑动冲突 (1)解决方法:如果说listview的数据一屏就可以显示完整,那么只需要在xml或者代码里给listview设置固定高度即可. 如果listv ...
- LCA（tarjan）
这是LCA算法中的一种,Tarjan算法 其实这么说也有点不对,应该是Tarjan+DFS进行解决 LCA又称为最近公共祖先 那么什么是最近公共祖先: 在一棵没有环的树上,每个节点肯定有其父亲节点和祖 ...
- 剑指Offer 61. 序列化二叉树 （二叉树）
题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 题目地址 https://www.nowcoder.com/practice/cf7e25aa97c04cc1a68c8f040e71fb84 ...
- Some notes in Stanford CS106A（3）
1.If ( str1==str2 ) means if str1 and str2 are refers to the same OBJECT. But when compare string , ...
- PKU《程序设计》专项课程_递归汉诺塔问题
取自coursera.org上公开课北京大学<C程序设计进阶> 递归调用注意的点 1.关注点放在求解的目标上,递推是,目标放在开头 2.找到第N次和第(N-1)次之间的关系,通项公式 3. ...
- 随笔：关于Class.getSimpleName()
最近学习过程中,遇到了Class.getSimpleName()这个方法,就搜索了一些资料: API定义: Class.getName():以String的形式,返回Class对象的"实体& ...
- GAN试验记录.
1.GAN目标函数不收敛,参数难调 2.数据集与生成集比例 3.生成四不像,模式崩塌
- 《DSP using MATLAB》Problem 7.15
用Kaiser窗方法设计一个台阶状滤波器. 代码: %% +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- 491. Increasing Subsequences
这种increasing xxx 题真是老客户了.. 本题麻烦点在于不能重复, 但是和之前的那些 x sum的题目区别在于不能排序的 所以.... 我还是没搞定. 看了一个Java的思路是直接用set ...
- Linux 开(关) ICMP 回应(防止被ping)
临时生效的办法 关闭回应: [root@host ~]# echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all // 客户端测试 ➜ ~ ping 0 ...