運(yùn)行在node服務(wù)器上的vue程序

• • 1. v-cli安裝
  • 2. 使用webpack構(gòu)建vue程序
  • 3. 目錄介紹
  • 4. webpack將vue打包成js文件

1. v-cli安裝

• 在玩v-cli vue客戶端腳手架時(shí)，需要安裝好node.js，是前端管理js包的工具
• 正式安裝vue-cli腳手架

1. npm install vue-cli -g 2. vue list

如果vue list出不來(lái)，注銷一下電腦

2. 使用webpack構(gòu)建vue程序

1、選擇一個(gè)目錄，在此目錄下打開cmd窗口，所有步驟如下

vue init webpack myvue # 等待nodejs構(gòu)建 cd myvue # 進(jìn)入myvue目錄下 npm install npm run dev

構(gòu)建項(xiàng)目時(shí)，會(huì)填寫一些項(xiàng)目的信息，我全選的no，你可以選yes，插件會(huì)自動(dòng)加入到項(xiàng)目

npm install后，可能會(huì)出錯(cuò)，按照提示修復(fù)就行

運(yùn)行當(dāng)前項(xiàng)目，訪問(wèn)下面的端口

訪問(wèn)項(xiàng)目

3. 目錄介紹

• 我這用的是idea打開的文件夾
  

4. webpack將vue打包成js文件

• webpack安裝 將es6語(yǔ)法打包編譯成es5的語(yǔ)法，用于運(yùn)行

npm install webpack -g # 打包工具 npm install webpack-cli -g # 客戶端工具

前端分模塊開發(fā),各個(gè)包可以相互引入.通過(guò)webpack編譯生成一個(gè)js文件

hello.js

// es6 語(yǔ)法 exports暴露一個(gè)方法 exports.sayHi = function() {document.write('<h3>bitqian666</h3>') }

main.js

// 導(dǎo)入js文件 let hello = require('./hello') hello.sayHi()

打包配置

module.exports = {entry: './modules/main.js',output: {filename: './bundle.js'} } 控制臺(tái)運(yùn)行 webpack

生成bundle.js,直接用

總結(jié)

以上是生活随笔為你收集整理的vue脚手架v-cli，第一个vue程序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。