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的所以就选择第一个了,这个看个人的开发环境) 下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于 ...
随机推荐
- ElasticSearch CPU和内存占用高的优化记录
公司最近使用ElasticSearch作为数据报表汇总引擎.上线三个月累计数据800万,但是今天突然大面积出现查询超时,上服务器查看服务运行情况,发现cpu使用率高达300% mem 使用率也到了90 ...
- java中的i++与++i的区别以及除法、模的用法（基础）
java中i++与++i的区别: 例如:int i=3; (先运算再赋值)j=++i; i的值先变成4,再赋给j,j的值为4: (先赋值再运算)j=i++; 先将i的值3赋给j,j的值为3,然后i变成 ...
- 本地搭建json-server
1.前言 为了前端项目获取数据,需要在本地搭建json-server,这样保证可以在本地实现增删改查的操作. 2.安装 全局安装: npm -g json-server 3.创建一个json-serv ...
- github 和 jupyter
放在github上的.ipynb文件可以用jupyter nbviewer来查看和分享. nbviewer首页: http://nbviewer.jupyter.org/ 输入github的名字或网址 ...
- ELK简单安装测试
1 介绍组件 Filebeat是一个日志文件托运工具,在你的服务器上安装客户端后,filebeat会监控日志目录或者指定的日志文件,追踪读取这些文件(追踪文件的变化,不停的读). Kafka是一种高吞 ...
- SpringJPA主键生成采用自定义ID，自定义ID采用年月日时间格式
自定义主键生成策略 在entity类上添加注解 @Id @GeneratedValue(strategy = GenerationType.AUTO, generator = "custom ...
- jmeter 测试MD5加密登录接口
1.点击options-funciton helper dialog,打开函数助手 在string to calculate MD5 hash 中填写密码,复制function sysntax中的值 ...
- SpringBoot打成jar包后，获取不到读取resources目录下文件路径的问题
问题描述: Springboot没有打成jar之前,可以成功获取读取resources目录下xxx.json文件的 路径.但是打成jar包后,接口调不通,原因是获取不到文件的路径. 原因: 在本地进行 ...
- java的初学感想
了解了JAVA的来源后,翻阅了一点关于java特性的书籍,众所周知,安全性和可移植性是java得以成功的前提,对此我想发表一点看法. 1.安全性:任何东西的安全性都是相对的,虽然java编译生成的字节 ...
- [Tom and Bag][需要记录过程的dp]
http://acm.beihua.edu.cn/problem/1007 Tom and Bag Description Tom is the most handsome CCPC contes ...