vue學習筆記

1、安裝， 

須要安裝node, npm, 淘寶鏡像cnpm, webpack, vue腳手架vue-cli

下面是個人操做：

node window下升級到最新版本，去官網(https://nodejs.org/en/)下載最新穩定版本（v6.9.2）的.msi, 替換到以前安裝的node目錄下，從新安裝，安裝成功node -v 查看下最新版本。

npm 升級: npm update -g

安裝淘寶鏡像cnpm: npm install -g cnpm --registry= https://registry.npm.taobao.org

安裝webpack: cnpm install webpack -g

安裝vue腳手架vue-cli: npm install vue-cli -g

在硬盤上找一個文件夾放工程用的，在終端中進入該目錄：cd 目錄路徑

建立項目：vue init webpack 工程名字<工程名字不能用中文>，

初始化的設置：

Target directory exists. Continue? (Y/n) 直接回車默認(而後會下載 vue2.0模板，這裏可能須要連代理)

Project name (vue-test) 直接回車默認

Project description (A Vue.js project) 直接回車默認

按上面截圖操做後，在webapps下有了一個vuedemo的目錄

進入該目錄，cd vuedemo ,

初始工程目錄以下：

安裝項目依賴：npm install (根據package.json的配置來安裝，安裝完成後會生成一個node_modules的目錄)

安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource：cnpm install vue-router vue-resource --save

運行：npm run dev （便可打開默認瀏覽器，啓動項目：http://localhost:8080/, 在git裏退出，採用ctr+c）

打包：npm run build    

 

二，項目中引入sass

cnpm install node-sass sass-loader --save-dev

build下的webpack.base.conf.js在loaders裏面加上  module -- rules

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
}

 

頁面中使用的時候：

<style lang="scss" scoped="" type="text/css"></style>