使用腳手架搭建VUE項目

一、使用vue-cli創建模板項目

1、什么是vue-cli

　　是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將項目需要的環境、依賴等信息都配置好。

2、全局安裝vue-cli

（1）檢查npm 版本，建議安裝到最新版本。

【命令行查看版本號】
node -v
npm -v

【升級npm（可選操作）】
npm install -g npm

【修改為淘寶鏡像（可選操作）】
npm config set registry "https://registry.npm.taobao.org"

（2）安裝

【全局安裝 webpack】
npm install webpack -g

【webpack 4.X 開始，需要安裝 webpack-cli 依賴】
npm install webpack webpack-cli -g

【查看版本號】
webpack -v

【全局安裝vue-cli】
npm install -g vue-cli

【查看版本號】
vue -V 

注：
　　若出現“Unexpected end of JSON input while parsing near”錯誤，
　　命令行輸入： npm cache clean --force

 

3、創建項目（命令行方式）

（1）創建一個文件保存的路徑。比如：E:\vue\vue-demo

【命令行進入該目錄】
cd E:\vue\vue-demo

【下載模板】
vue init webpack vue-demo

【進入交互頁面，根據自己情況選擇】
?Project name vue-demo # 項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters）。
? Project description A Vue.js project # 項目描述,隨便寫
? Author # 作者名稱
? Vue build standalone # 我選擇的運行加編譯時
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作為代碼規范.
? Pick an ESLint preset Standard # 一樣的ESlint 相關
? Set up unit tests Yes # 是否安裝單元測試
? Pick a test runner 按需選擇 # 測試模塊
? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測試
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我選的NPM

（2）安裝成功后，進入項目目錄

【命令行進入該目錄】
cd E:\vue\vue-demo

【初始化項目】
 npm install
 
 【啟動項目，根據package.json中的數據來啟動】
 npm run dev
 
 【關閉項目】
 Ctrl + C
 
 【瀏覽器訪問：】
http://localhost:8080/

【項目打包上線】
npm run build
將打包后生成的dist 目錄中的文件拷貝到服務器的相應地址即可（比如tomcat的webapps目錄下）。

在瀏覽器中輸入http://localhost:8080/#/

 

 

@天才卧龍的博客