當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

使用vue-CLI构建vue工程项目

發(fā)布時(shí)間：2023/12/10 vue 42 豆豆

生活随笔收集整理的這篇文章主要介紹了使用vue-CLI构建vue工程项目小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

vue2是對(duì)新手很友好的MVVM框架，有完善的官方中文文檔，閱讀起來(lái)也非常容易理解，由淺入深，示例完整。同時(shí)官方也提供了一個(gè)開(kāi)箱即用的 vue-cli 幫我們生成一個(gè)完整的項(xiàng)目框架。

vue.js 著名的全家桶系列, 包含了， vue-router, vuex， axios，再加上 vue-cli 就是一個(gè)從路由，數(shù)據(jù)流管理，http請(qǐng)求都有的核心項(xiàng)目，vue 社區(qū)的豐富資源，也是滿(mǎn)足了我們?nèi)粘ｉ_(kāi)發(fā)中的需求了。

vue-cli 這個(gè)構(gòu)建工具大大降低了 webpack 的使用難度，開(kāi)箱即用的特性，大大降低了我們的學(xué)習(xí)成本，加快了我們的開(kāi)發(fā)速度。

在使用vue-cli之前，請(qǐng)確認(rèn)你的電腦已經(jīng)安裝了 node，建議版本在 8.0.0 以上
如果需要使用 nvm 這個(gè) node 版本管理器，可以參考我的另一篇文章 nvm 的安裝

安裝 vue-cli (這里我們確認(rèn)已安裝過(guò)node)

使用 npm（不知道npm的同學(xué)，可以自行百度，或者看我上面 nvm的安裝教程）全局安裝 webpack，打開(kāi)命令行工具輸入：npm install webpack -g，安裝完成之后輸入 webpack -v，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。
注意：webpack 4.X 開(kāi)始，需要安裝 webpack-cli 依賴(lài) ,所以使用這條命令 npm install webpack webpack-cli -g

PS D:\Notes> webpack -v4.16.2

全局安裝 vue-cli

在命令行中輸入 npm install -g vue-cli
安裝完成后，檢驗(yàn)是否安裝成功，輸入 vue-V (注意：這里是大寫(xiě)的 “V”)，如果出現(xiàn)版本號(hào)，則說(shuō)明安裝成功。
PS D:\Notes> vue -V 3.0.5
打開(kāi) node 的安裝目錄，也可以看到我們?nèi)职惭b的 vue-cli

用 vue-cli 來(lái)構(gòu)建項(xiàng)目。

首先，在D盤(pán)新建一個(gè)文件夾作為項(xiàng)目的存放地，然后cd到目錄下，輸入命令，創(chuàng)建項(xiàng)目
vue init webpack vue-demo
等待模板下載成功后，會(huì)有一個(gè)交互式的選項(xiàng)讓你選擇：
? Project name vue-demo # 項(xiàng)目名稱(chēng)，直接回車(chē)，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫(xiě)字母，如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫(xiě) ，可以參考一下。 ? Project description A Vue.js project # 項(xiàng)目描述,隨便寫(xiě) ? Author # 作者名稱(chēng) ? Vue build standalone # 我選擇的運(yùn)行加編譯時(shí)Runtime + Compiler: recommended for most users ? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的 ? Use ESLint to lint your code? Yes # 是否使用 ESLint 作為代碼規(guī)范. ? Pick an ESLint preset Standard # 一樣的ESlint 相關(guān) ? Set up unit tests Yes # 是否安裝單元測(cè)試 ? Pick a test runner 按需選擇 # 測(cè)試模塊 ? Setup e2e tests with Nightwatch? 安裝選擇 # e2e 測(cè)試 ? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我選的NPM

安裝完成后，安裝提示，cd 到項(xiàng)目目錄, 執(zhí)行命令 npm install 進(jìn)行初始化。
# Project initialization finished! # ========================
To get started:

cd vue-demo
npm run dev
如果安裝速度太慢。可以把 npm 的安裝源指向淘寶鏡像，這里就不贅述了。
啟動(dòng)項(xiàng)目
npm run dev
DONE Compiled successfully in 4014ms

I Your application is running here: http://localhost:8080
- 如果瀏覽器打開(kāi)之后，沒(méi)有加載出頁(yè)面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js 的 post
 module.exports = {dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // 這里可以配置跨域// Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // 端口就是改這里 autoOpenBrowser: false, // 這里是ture的話(huà)，就會(huì)自動(dòng)打開(kāi)瀏覽器
我的端口沒(méi)有被占用，所以直接啟動(dòng)成功，打開(kāi) http://localhost:8080 就能看到歡迎頁(yè)面。
vue-cli 的 webpack 配置分析
- 從 package.json 可以看到開(kāi)發(fā) 和生產(chǎn) 環(huán)境的入口。
  "scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","test": "npm run unit","lint": "eslint --ext .js,.vue src test/unit","build": "node build/build.js"},
  - dev 就是開(kāi)發(fā)環(huán)境的啟動(dòng)命令
  - build 是生產(chǎn)打包環(huán)境的命令
  - lint 是ESLint的檢查命令在 --ext 前加一個(gè) --fix 可以自動(dòng)修復(fù)不符合規(guī)范的代碼
打包上線(xiàn)
- 運(yùn)行 npm run build 命令，就可以進(jìn)行打包工作了，打包完成后，會(huì)生成 dist 目錄，項(xiàng)目上線(xiàn)時(shí)，把dist 目錄下的文件放到服務(wù)器就可以了。
調(diào)試工具 vue-tool
- 點(diǎn)擊查看我的這篇博客分享
另：
1.npm 開(kāi)啟了npm run dev以后怎么退出或關(guān)閉？ctrl+c2.--save-dev自動(dòng)把模塊和版本號(hào)添加到模塊配置文件package.json中的依賴(lài)?yán)飀evdependencies部分3. --save-dev 與 --save 的區(qū)別--save 安裝包信息將加入到dependencies（生產(chǎn)階段的依賴(lài)）--save-dev 安裝包信息將加入到devDependencies（開(kāi)發(fā)階段的依賴(lài)），所以開(kāi)發(fā)階段一般使用它
轉(zhuǎn)載自： https://blog.csdn.net/wulala_hei/article/details/85000530

總結(jié)

以上是生活随笔為你收集整理的使用vue-CLI构建vue工程项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇： PMP读书笔记(第11章)
下一篇： vue报错：error Strings