這篇文章主要介紹了Vue進行環(huán)境搭建和項目構(gòu)建的操作步驟，具有一定借鑒價值，需要的朋友可以參考下。下面就和我一起來看看吧。
為郊區(qū)等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及郊區(qū)網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站建設(shè)、郊區(qū)網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。
https://nodejs.org/zh-cn/
在node安裝目錄中新建文件夾node_cache、node_global
node_global 全局包下載存放
node_cache node緩存
CMD窗口執(zhí)行兩條命令：
npm config set prefix "D:\jnodejs\node_global" npm config set cache "D:\nodejs\node_cache"
用戶變量修改path：
系統(tǒng)變量添加NODE_PATH，值為D:\nodejs\node_modules
添加到path
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue -g cnpm install vue-cli -g
vue -V或者是vue --version查詢的是vue-cli的版本
vue init webpack "項目名稱"
項目目錄結(jié)構(gòu)：
build 文件夾: 里面是對 webpack 開發(fā)和打包的相關(guān)設(shè)置，包括入口文件、輸出文件、使用的模塊等；
config 文件夾: 主要是指定開發(fā)和打包中的靜態(tài)資源路徑、要壓縮的文件類型、開發(fā)使用的端口號、開發(fā)使用虛擬服務(wù)器跨域請求 api 等。
node_modules: 項目的依賴庫；
src 文件夾： 我們主要操作的地方，組件的增加修改等都在這個文件夾里操作，下文會有詳細介紹；
static 文件夾: 靜態(tài)資源文件夾，放置不會變動的資源，直接被復(fù)制到最終的打包目錄（默認是dist/static）下；
.babelrc: 使用 babel 的配置文件，用來設(shè)置轉(zhuǎn)碼規(guī)則和插件；
.editorconfig: 代碼的規(guī)范文件，規(guī)定使用空格或 tab 縮進，縮進的長度是兩位還是四位之類的代碼風(fēng)格，使用的話需要在編輯器里下載對應(yīng)的插件；
.eslintignore: 指定 eslint 忽略的文件；
.eslintrc: 配置 eslint 的檢測規(guī)則，強制按照規(guī)則書寫代碼；
.gitignore: 指定 git 忽略的文件，所有 git 操作均不會對其生效；
.postcssrc: 指定使用的 css 預(yù)編譯器，里面默認配置了 autoprefixer ，自動補全瀏覽器前綴；
favicon.ico: 瀏覽器標簽頁 title 旁邊的小圖標，這是需要我們自己粘貼過來的；
index.html: 首頁文件，項目運行的時候，會自動將我們在 src 文件夾里生成的組件插入這個文件里；
LICENSE: 項目聲明的 license；
package-lock.json: 當 node_modules 或 package.json 發(fā)生變化時自動生成的文件。這個文件主要功能是確定當前安裝的包的依賴，以便后續(xù)重新安裝的時候生成相同的依賴，而忽略項目開發(fā)過程中有些依賴已經(jīng)發(fā)生的更新；
package.json: 指定項目開發(fā)和生成環(huán)境中需要使用的依賴庫；
README.md: 相當于是一個備注文件，對項目開發(fā)過程中需要注意的地方進行一些說明。
以上就是Vue進行環(huán)境搭建和項目構(gòu)建的操作步驟的詳細內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來創(chuàng)新互聯(lián)行業(yè)資訊！
重慶分公司
重慶分公司
