Vue之旅-Vue环境搭建
一、准备工作：
程序员必备环境：Node.js和Git
node.js地址 https://nodejs.org/en/download/
git地址 https://git-scm.com/downloads https://git-for-windows.github.io/
二、开始工作：
1.执行命令 $ npm install -g vue-cli
注：-g为全局安装，如果是mac按如下写法：sudo npm install -g vue-cli
vue-cli提供了几种模板，如下三种模式：
Simple（太简单，就一个index.html文件）、webpack-simple（比较实用）、webpack（较全，内置有方法检查、单元测试等。）
2.创建项目（或者说模版项目）命令格式：vue init <template-name> <project-name> --- vue init 模版名称 项目名称（小写英文字母）
注：
执行命令 vue init webpack vuetest 命令窗口会出现提示 （全部默认enter 就可以了）提示如下
？Project name (vuetest)
? Project name vuetest
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (songxibin)
? Author songxibin
? Vue build standalone
下边的提示案情况选择，是和否都可以试试，提示以此为vue-router(路由) eslint(代码检查)等。此时项目创建完毕，ctrl+c退出创建 cd vuetest进入刚才创建的vuetest项目
3.执行命令 npm install 安装依赖。
4.依赖安装完毕执行命令 npm run dev 运行项目，默认为本地8080端口。
5.编译并打包，将打包好的dist丢到服务器上：
npm run build
三、vue+webpack构建
首先创建项目文件夹，进入文件（空文件）
打开控制台或git 安装webpack 和 webpack-dev-server
执行命令 npm install -g webpack webpack-dev-server
项目初始化 执行命令 npm init -y
//项目目录下安装依赖
npm install webpack webpack-dev-server style-loader css-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
//vue相关依赖
npm install vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api vue-template-compiler --save-dev
//安装vue
npm install vue --save
配置文件 webpack.config.js 内容
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
/* 输出目录，没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录，可以直接从这里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
module: {
rules: [
/* 用来解析vue后缀的文件 */
{
test: /\.vue$/,
loader: 'vue-loader'
},
/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
{
test: /\.js$/,
loader: 'babel-loader',
/* 排除模块安装目录的文件 */
exclude: /node_modules/
}
]
}
}
app.js内容
import Vue from 'vue'
//import Hello from "../../src/components/Hello.vue";
//使用全局函数注入组件，就不用import和在创建Vue对象时定义components键值
Vue.component('Hello', require("../../src/components/Hello.vue"));
new Vue({
el: "#app",
//定义template可以不用在html中插入""
//template: '',
//components: { Hello }
});
Hello.vue 内容:
{{msg}}
body{
background-color:#eee;
}
export default{
data(){
return{
msg:'this is template body vue'
}
}
}
index.html 内容
<!doctype html>
<html>
<head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0,mininum-scale=1.0,maxinum-scale=1.0'>
<title>vue-webpack</title>
</head>
<body>
<div id='app'></div>
<script src='./dist/build.js'></script>
</body>
</html>
转载于:https://www.cnblogs.com/yang6120yang/p/7718542.html
Vue之旅-Vue环境搭建相关推荐
- 小白的渗透之旅1-DVWA环境搭建
小白的渗透之旅1-DVWA环境搭建 注意:DVWA需要依赖httpd.PHP.MySQL.php-mysql等应用或组件,最简单的方法是安装wampserver(http://www.wampserv ...
- 【原作者：吴秦（Tyler）http://www.cnblogs.com/skynet/archive/2010/04/12/1709892.html】Android开发之旅：环境搭建及HelloWo
Android开发之旅:环境搭建及HelloWorld 2010-04-12 00:45 by 吴秦, 801360 阅读, 138 评论, 收藏, 编辑 --工欲善其事必先利其器 引言 本系列适合0 ...
- VUE前段开发-开发环境搭建和开发工具安装
一 VUE介绍 (1)VUE,也就是vue.js,官方的介绍是是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上 ...
- Vue.js2.0开发环境搭建（四）
转载自 vuejs2.0从入门到放弃--入门实例(四) 最近,很多小伙伴有疑惑,想学vuejs必须先了解复杂的构建工具和命令行操作吗!!答案是否定的! 对于很多做前端的同学,涉及到命令行和构建工具 ...
- Vue.js2.0开发环境搭建（二）
转载自 Vue.js 2.0从入门到放弃---入门实例(二) 前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具.这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性,以及一个小实 ...
- Vue.js2.0开发环境搭建（三）
转载自 Vue.js2.0从入门到放弃---入门实例(三) 今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据.话不多说,直接上干货吧. ...
- Android开发之旅：环境搭建及HelloWorld
2019独角兽企业重金招聘Python工程师标准>>> 引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Andr ...
- Android开发之旅：环境搭建及HelloWorld---吴秦（Tyler）
--工欲善其事必先利其器 引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方 ...
- vue安装和开发环境搭建教程2021年
1.安装node.js地址:https://nodejs.org/en/ 自定义安装地址,路径不要含空格(如\Program Files带有空格),一路next 我的安装路径是D:\Program\n ...
最新文章
- 命令别名的设置alias，unalias
- linux mysql 清空缓存吗_linux 缓存手动清除
- 解决svn uuid变更问题
- 怎么修改_PDF怎么修改文字？其实修改PDF内容很简单
- 企业邮箱自建，该如何选型测试
- python你会吗_Python这些问题你会吗？
- mysql----innodb统计信息
- JSON 数据格式（基础知识）
- 避免无法预知和依赖于实现环境的行为
- Qt音视频开发41-人脸识别嵌入式
- 计算机鼠标双击怎么,解决方案:解决鼠标双击问题的方法（最全面，最实用）_计算机基础知识_IT /计算机_信息...
- spring源码解读：@Lazy延迟注入的逻辑
- hdu 4966 GGS-DDU 最小树形图
- U盘中毒后，文件夹被隐藏的解决方法
- Don't Starve：饥荒
- 呀，要解析的xml文件有1G大，怎么办？
- NFC(Near Field Communication，近场通信)相关
- linux ftp 虚拟目录,Linux搭建FTP之vsftpd 虚拟用户配置步骤
- Sparql查询RDF
- 计算机组装与维修问答题答案,计算机组装与维修试题精选(内附答案).doc