快速創建一個vue 項目
阿新 • • 發佈:2018-07-28
所有 bar 微軟公司 host class blank 本機 any pex 下的
首先查找本機是否安裝node 使用node -v 進行檢查出現版本號即安裝了
再檢查本是否安裝 npm 使用npm -v 進行檢查,出現版本號即安裝好了
安裝vue-cli 使用npm install -g vue-cli 命令進行安裝
安裝好這一步,在創建一個項目 vue init webpack my-project,這一步要一系列的y或者n進行對項目的一些簡單配置
進入項目中使用cd my-project 進入項目
再npm install 一下
然後在npm run dev 或者npm start運行項目
如果項目要打包上線使用命令npm run build 進行對項目的打包,這個時候你直接打開dist/
index.html
,會發現文件可以打開,但是所有的js,css,img
等路徑有問題是指向根目錄的,
此時需要修改config/index.js
裏的assetsPublicPath
的字段,初始項目是/
他是指向項目根目錄的也是為什麽會出現錯誤,這時改為./
- ./ 當前目錄
- ../ 父級目錄
- / 根目錄
-
根目錄:在計算機的文件系統中,根目錄指邏輯驅動器的最上一級目錄,它是相對子目錄來說的;
它如同一棵大樹的“根”一般,所有的樹杈以它為起點,故被命名為根目錄。以微軟公司開發的Windows操作系統為例:
打開我的計算機(計算機),雙擊C盤就進入C盤的根目錄。雙擊D盤就進入D盤的根目錄
build: { env: require(‘./prod.env‘), index: path.resolve(__dirname, ‘../dist/index.html‘), assetsRoot: path.resolve(__dirname, ‘../dist‘), assetsSubDirectory: ‘static‘, assetsPublicPath: ‘./‘, productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: [‘js‘, ‘css‘], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }
- 在從dist根目錄打開
index
文件就可以訪問了。
快速創建一個vue 項目