運行在node服務器上的vue程序

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

1. v-cli安裝

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

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

如果vue list出不來，注銷一下電腦

2. 使用webpack構建vue程序

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

vue init webpack myvue # 等待nodejs構建 cd myvue # 進入myvue目錄下 npm install npm run dev

構建項目時，會填寫一些項目的信息，我全選的no，你可以選yes，插件會自動加入到項目

npm install后，可能會出錯，按照提示修復就行

運行當前項目，訪問下面的端口

訪問項目

3. 目錄介紹

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

4. webpack將vue打包成js文件

• webpack安裝 將es6語法打包編譯成es5的語法，用于運行

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

前端分模塊開發,各個包可以相互引入.通過webpack編譯生成一個js文件

hello.js

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

main.js

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

打包配置

module.exports = {entry: './modules/main.js',output: {filename: './bundle.js'} } 控制臺運行 webpack

生成bundle.js,直接用

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。