Vue進行環境搭建和項目構建的操作步驟

這篇文章主要介紹了Vue進行環境搭建和項目構建的操作步驟，具有一定借鑒價值，需要的朋友可以參考下。下面就和我一起來看看吧。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

1.下載安裝node.js

https://nodejs.org/zh-cn/

2.修改包路徑

在node安裝目錄中新建文件夾node_cache、node_global

• node_global 全局包下載存放

• node_cache node緩存

CMD窗口執行兩條命令：

npm config set prefix "D:\jnodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

3.設置環境變量

用戶變量修改path：

系統變量添加NODE_PATH，值為D:\nodejs\node_modules

添加到path

4.安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

5. 安裝vue、vue-cli腳手架

cnpm install vue -g
cnpm install vue-cli -g

vue -V或者是vue --version查詢的是vue-cli的版本

6.構建項目

vue init webpack "項目名稱"

項目目錄結構：

• build 文件夾: 里面是對 webpack 開發和打包的相關設置，包括入口文件、輸出文件、使用的模塊等；

• config 文件夾: 主要是指定開發和打包中的靜態資源路徑、要壓縮的文件類型、開發使用的端口號、開發使用虛擬服務器跨域請求 api 等。

• node_modules: 項目的依賴庫；

• src 文件夾： 我們主要操作的地方，組件的增加修改等都在這個文件夾里操作，下文會有詳細介紹；

• static 文件夾: 靜態資源文件夾，放置不會變動的資源，直接被復制到最終的打包目錄（默認是dist/static）下；

• .babelrc: 使用 babel 的配置文件，用來設置轉碼規則和插件；

• .editorconfig: 代碼的規范文件，規定使用空格或 tab 縮進，縮進的長度是兩位還是四位之類的代碼風格，使用的話需要在編輯器里下載對應的插件；

• .eslintignore: 指定 eslint 忽略的文件；

• .eslintrc: 配置 eslint 的檢測規則，強制按照規則書寫代碼；

• .gitignore: 指定 git 忽略的文件，所有 git 操作均不會對其生效；

• .postcssrc: 指定使用的 css 預編譯器，里面默認配置了 autoprefixer ，自動補全瀏覽器前綴；

• favicon.ico: 瀏覽器標簽頁 title 旁邊的小圖標，這是需要我們自己粘貼過來的；

• index.html: 首頁文件，項目運行的時候，會自動將我們在 src 文件夾里生成的組件插入這個文件里；

• LICENSE: 項目聲明的 license；

• package-lock.json: 當 node_modules 或 package.json 發生變化時自動生成的文件。這個文件主要功能是確定當前安裝的包的依賴，以便后續重新安裝的時候生成相同的依賴，而忽略項目開發過程中有些依賴已經發生的更新；

• package.json: 指定項目開發和生成環境中需要使用的依賴庫；
  README.md: 相當于是一個備注文件，對項目開發過程中需要注意的地方進行一些說明。

以上就是Vue進行環境搭建和項目構建的操作步驟的詳細內容了，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎來億速云行業資訊！