vue学习笔记

2019独角兽企业重金招聘Python工程师标准>>>

一、安装， 

需要安装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>

 

转载于:https://my.oschina.net/u/2332658/blog/805338