Vue之旅-Vue环境搭建
一、準(zhǔn)備工作：
程序員必備環(huán)境：Node.js和Git
node.js地址?https://nodejs.org/en/download/
git地址 https://git-scm.com/downloads? ? https://git-for-windows.github.io/
二、開(kāi)始工作：
1.執(zhí)行命令 ? $ ?npm install -g vue-cli?
注：-g為全局安裝，如果是mac按如下寫(xiě)法：sudo npm install -g vue-cli
vue-cli提供了幾種模板，如下三種模式：
Simple（太簡(jiǎn)單，就一個(gè)index.html文件）、webpack-simple（比較實(shí)用）、webpack（較全，內(nèi)置有方法檢查、單元測(cè)試等。）
2.創(chuàng)建項(xiàng)目（或者說(shuō)模版項(xiàng)目）命令格式：vue init <template-name> <project-name> ?--- ?vue init 模版名稱(chēng) 項(xiàng)目名稱(chēng)（小寫(xiě)英文字母）
注：
執(zhí)行命令 vue init webpack vuetest ?命令窗口會(huì)出現(xiàn)提示 （全部默認(rèn)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(代碼檢查)等。此時(shí)項(xiàng)目創(chuàng)建完畢，ctrl+c退出創(chuàng)建 cd vuetest進(jìn)入剛才創(chuàng)建的vuetest項(xiàng)目
3.執(zhí)行命令 npm install 安裝依賴。
4.依賴安裝完畢執(zhí)行命令 npm run dev 運(yùn)行項(xiàng)目，默認(rèn)為本地8080端口。
5.編譯并打包，將打包好的dist丟到服務(wù)器上：
npm run build
三、vue+webpack構(gòu)建
首先創(chuàng)建項(xiàng)目文件夾，進(jìn)入文件（空文件）
打開(kāi)控制臺(tái)或git ?安裝webpack 和 webpack-dev-server
執(zhí)行命令 npm install -g webpack webpack-dev-server
項(xiàng)目初始化? 執(zhí)行命令 npm init -y
//項(xiàng)目目錄下安裝依賴
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相關(guān)依賴
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 內(nèi)容
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
/* 輸出目錄，沒(méi)有則新建 */
path: path.resolve(__dirname, './dist'),
/* 靜態(tài)目錄，可以直接從這里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
module: {
rules: [
/* 用來(lái)解析vue后綴的文件 */
{
test: /\.vue$/,
loader: 'vue-loader'
},
/* 用babel來(lái)解析js文件并把es6的語(yǔ)法轉(zhuǎn)換成瀏覽器認(rèn)識(shí)的語(yǔ)法 */
{
test: /\.js$/,
loader: 'babel-loader',
/* 排除模塊安裝目錄的文件 */
exclude: /node_modules/
}
]
}
}
?
app.js內(nèi)容
import Vue from 'vue'
//import?Hello?from?"../../src/components/Hello.vue";
//使用全局函數(shù)注入組件，就不用import和在創(chuàng)建Vue對(duì)象時(shí)定義components鍵值
Vue.component('Hello',?require("../../src/components/Hello.vue"));
new?Vue({
el:?"#app",
//定義template可以不用在html中插入""
//template:?'',
//components:?{?Hello?}
});
?
Hello.vue 內(nèi)容:
{{msg}}
body{
background-color:#eee;
}
export?default{
data(){
return{
msg:'this?is?template?body?vue'
}
}
}
?
index.html 內(nèi)容
<!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>
轉(zhuǎn)載于:https://www.cnblogs.com/yang6120yang/p/7718542.html
總結(jié)
以上是生活随笔為你收集整理的Vue之旅-Vue环境搭建的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： u盘被镜像怎么改回去 U盘镜像如何还原？
- 下一篇： 不借助vue-cli，自行构建一个vue