vue如何新建一個項目

vue建立項目（npm安裝→初始化項目）

第一步npm安裝

首先：先從nodejs.org中下載nodejs

 

 

圖1

雙擊安裝，在安裝界面一直Next

 

圖2

 

 

圖3

 

 

圖4

直到Finish完成安裝。

打開控制命令行程序（CMD）,檢查是否正常

 

圖5

使用淘寶NPM鏡像

你們都知道國內直接使用npm 的官方鏡像是很是慢的，這裏推薦使用淘寶 NPM 鏡像。

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

這樣就可使用cnpm 命令來安裝模塊了：

 

第二步項目初始化

1.第一步：安裝vue-cli

cnpm install vue-cli -g      //全局安裝 vue-cli

有的網站上用：

cnpm install -g @vue/cli

 

圖6

查看vue-cli是否成功，不能檢查vue-cli,須要檢查vue

 

圖7

若是安裝失敗的話須要清空緩存處理

npm cache clean --force

 

選定路徑，新建vue項目，這裏我是在桌面上新建了sun文件夾，cd目錄路徑

下面我一項目名爲sell新建vue項目

vue init webpack  」項目名稱「

 

圖8

如今已經建立好了，那就讓項目先安裝下依賴再運行一下，會出現下面的頁面，操做指令是：

cnpm install

cnpm run dev

注意 這裏要在sell下進行安裝和運行哦!!!

 

圖9

啦啦啦  安裝成功。

 

圖10

利用vue-cil初始化構建vue項目，咱們會得到一個初始化的文件夾結構，以下：

 

 

圖11

 

目錄結構

dist: 打包的項目目錄(打包後會生成)
node_modules: 項目依賴
public: 共用資源
src: 項目目標,書寫代碼的地方
    -- assets:資源
    -- components:組件
    -- views:視圖組件
    -- App.vue:根組件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 狀態庫文件
vue.config.js: 項目配置文件(沒有能夠本身新建)

項目目錄結構

|vue-proj
|    |src
|    |    |components     小組件
|    |    |    |Nav.vue
|    |    |views  頁面組件
|    |    |    |PageFirst.vue
|    |    |    |PageSecond.vue
|    |    |App.vue  根組件
|    |    |router.js  安裝vue-router插件的腳本文件 - 配置路由的

 

• README的解讀

# my_vue

## Project setup
​```
npm install  #安裝環境依賴
​```

### Compiles and hot-reloads for development
​```
npm run serve #啓動項目
​```

### Compiles and minifies for production
​```
npm run build #項目打包
​```

### Run your tests
​```
npm run test #運行測試腳本
​```

### Lints and fixes files
​```
npm run lint #執行代碼規範檢測
​```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

 

vue項目目錄講解

　　

　　一、build：構建腳本目錄

　　　　1）build.js   ==>  生產環境構建腳本；


　　　　2）check-versions.js   ==>  檢查npm，node.js版本；

　　　　3）utils.js   ==>  構建相關工具方法；

　　　　4）vue-loader.conf.js   ==>  配置了css加載器以及編譯css以後自動添加前綴；

　　　　5）webpack.base.conf.js   ==>  webpack基本配置；

　　　　6）webpack.dev.conf.js   ==>  webpack開發環境配置；

　　　　7）webpack.prod.conf.js   ==>  webpack生產環境配置；

　　二、config：項目配置

　　　　1）dev.env.js   ==>  開發環境變量；

　　　　2）index.js   ==>  項目配置文件；

　　　　3）prod.env.js   ==>  生產環境變量；

　　三、node_modules：npm 加載的項目依賴模塊

　　四、src：這裏是咱們要開發的目錄，基本上要作的事情都在這個目錄裏。裏面包含了幾個目錄及文件：

　　　　1）assets：資源目錄，放置一些圖片或者公共js、公共css。這裏的資源會被webpack構建；

　　　　2）components：組件目錄，咱們寫的組件就放在這個目錄裏面；

　　　　3）router：前端路由，咱們須要配置的路由路徑寫在index.js裏面；

　　　　4）App.vue：根組件；

　　　　5）main.js：入口js文件；

　　五、static：靜態資源目錄，如圖片、字體等。不會被webpack構建

　　六、index.html：首頁入口文件，能夠添加一些 meta 信息等

　　七、package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息


　　八、README.md：項目的說明文檔，markdown 格式

　　九、.xxxx文件：這些是一些配置文件，包括語法配置，git配置等

開始咱們的第一個vue項目

　　一、在components目錄下新建一個views目錄，裏面寫咱們的vue組件

　　　　1）開始咱們的第一個組件：

　　　　a：在views目錄下新建First.vue

　　　　b：在router目錄下的index.js裏面配置路由路徑

　　　　

　　　　 c：template 寫 html，script寫 js，style寫樣式

　　　　

　　　　d：輸入ip： http://localhost:8010/#/first，查看頁面效果

　　　　

　　　　注意：

　　　　一個組件下只能有一個並列的 div，如下寫法是錯誤：

　　　　

　　　　數據要寫在 return 裏面，而不是像文檔那樣子寫，如下寫法錯誤：

　　　　

 

　　二、講講父子組件

　　　　1）在components目錄下新建sub文件夾，用於存放一下能夠複用的子組件。好比新建一個Confirm.vue組件

　　　　

　　　　3）在父組件中引入子組件

　　　　引入：import Confirm from '../sub/Confirm'

　　　　註冊：在<script></script>標籤內的 name代碼塊後面加上 components: {Confirm}

　　　　使用：在<template></template>內加上<confirm></confirm>

　　　　完整代碼：

　　　　

　　　　2）父子組件通訊

　　　　子組件：

　　　　

　　　　父組件：

　　　　

 　　三、使用路由搭建單頁應用

　　　　1）按照以上方法，新建一個Second.vue組件

　　　　2）路由跳轉：<router-link to="/second">去第二個頁面</router-link>

　　　　

　　　　

　　　　路由跳轉以後，注意觀察路徑變化：

　　　　

　　　　能夠看到，在html中解析成了a標籤

　　　　

　　　　這裏只是簡單的介紹了一下路由的使用，更多詳細信息，請前往官網學習：https://router.vuejs.org/zh-cn/

　　四、如何用less寫樣式

　　　　1）安裝less依賴：npm install less less-loader --save

　　　　

　　　　安裝成功以後，可在package.json中看到，多增長了2個模塊：

　　　　

　　　　2）編寫less

　　　　　　

5、補充

　　一、解決vue不能自動打開瀏覽器的問題：當咱們輸入npm run dev，運行項目，命令行提示咱們運行成功，可是瀏覽器也沒有自動打開，只能本身手動輸入。

　　解決：

　　　　1）打開config  ==> index.js

　　　　

　　　　2）module.exports配置中找到autoOpenBrowser，默認設置的是false

　　　　

　　　　3）將autoOpenBrowser改成true

　　　　

　　　　4）Ctrl+C，而後咱們重啓一下，就能自動打開瀏覽器了

　　　　

　　二、爲了不端口衝突，也能夠修改port，打開目錄同上

　　　　

　　　　修改爲功：

　　　　

 

 

最後附上demo地址：https://github.com/yanxulan/vue-demo.git

下面開始進入你的vue之旅吧！！

— —我是一隻java小菜鳥，或許永遠飛不高，但我永遠渴望遠方！