vue-cli搭建前端项目学习记录

vue-cli搭建项目:

####搭建项目

命令 :vue init <template-name> <project-name>.
template-name有几个:

1. **webpack** - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
2. **webpack-simple** - A simple Webpack + vue-loader setup for quick prototyping.
3.**browserify** - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
4.**browserify-simple** - A simple Browserify + vueify setup for quick prototyping.
5.**pwa** - PWA template for vue-cli based on the webpack template
6.**simple** - The simplest possible Vue setup in a single HTML file.

cd 到项目目录下,执行npm install安装依赖.
npm run dev.启动8080端口服务器.

安装依赖

npm install --save xxx@version 安装依赖到package.json的dependencies下面.
npm install --save-dev xxx@version 安装依赖到package.json的devDependencies下面.
安装原则是:项目运行时需要用到的包使用–save，否则使用–save-dev。

学习vue-router

自己动手利用vue-router搭建了一个douban-demo的vue应用:douban-demo
关键词:

动态路由,路由嵌套,编程式导航,命名路由,命名视图,重定向和别名,向路由组件传递props,HTML5 histoy模式
过渡动效,数据获取,滚动行为,懒加载

####git提交的步骤
git init
git add .
git commit -m ‘first commit’
git remote add origin git@github.com:MjingGithub/XXX.git
git push -u origin master
更新.gitignore并使之生效方法
git rm -r –cached .
git add -A
git commit -m “update .gitignore”

####vuex学习:vuex
vue.js中文社区:https://www.vue-js.com/getstart
vue.js项目中使用引入js的形式,使用vuex的格式如下:

//make sure to call Vue.use(Vuex) if using a module system
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  	increment: state => state.count++,
    decrement: state => state.count--
  }
})
new Vue({
  el: '#app',
  computed: {
    count () {
	    return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
    	store.commit('decrement')
    }
  }
})

下载最新js文件cdn方法

https://unpkg.com/vuex加上框架的名称.

vue-resource使用

vue-resouce cdn

多页面vue-cli项目搭建

demo:
http://blog.lanchenglv.com/article/vue2-webpack2-cli-vux2-multe-page.html
https://github.com/bluefox1688/vue-cli-multi-page

####搭建自己的多页面应用
文件配置详细介绍: http://www.cnblogs.com/libin-1/p/6596810.html

webpack入门指迷:https://segmentfault.com/a/1190000002551952 https://github.com/petehunt/webpack-howto
webpack最新官网教程:https://doc.webpack-china.org/guides/getting-started
移动端vue组件库:https://vux.li/#/
babel-loader作用:一个js编译器，把浏览器不支持的js转译成浏览器支持的js.
source map
http://blog.teamtreehouse.com/introduction-source-maps
https://doc.webpack-china.org/configuration/devtool

express:Express 是一个小巧且灵活的 Node.js Web应用框架，它有一套健壮的特性，可用于开发单页、多页和混合Web应用。
express入门简介:http://blog.jobbole.com/56121/

Node.js的process模块:
process模块用来与当前进程互动，可以通过全局变量process访问，不必使用require命令加载。它是一个EventEmitter对象的实例。
process对象提供一系列属性，用于返回系统信息。

process.pid：当前进程的进程号。
process.version：Node的版本，比如v0.10.18。
process.platform：当前系统平台，比如Linux。
process.title：默认值为“node”，可以自定义该值。
process.argv：当前进程的命令行参数数组。
process.env：指向当前shell的环境变量，比如process.env.HOME。
process.execPath：运行当前进程的可执行文件的绝对路径。
process.stdout：指向标准输出。
process.stdin：指向标准输入。
process.stderr：指向标准错误。

node.js path模块讲解:https://nodejs.org/api/path.html

####vue-loader学习
中文文档:https://vue-loader.vuejs.org/zh-cn/
定义:vue-loader 是一个 Webpack 的 loader，可以将.Vue 组件转换为 JavaScript 模块.

它有一些很酷的特性：

默认支持 ES2015；
允许对 Vue 组件的组成部分使用其它 Webpack loader，比如对 <style>使用 SASS 和对<template> 使用 Jade；
vue 文件中允许自定义节点，然后使用自定义的 loader 进行处理；
把 <style>和 <template> 中的静态资源当作模块来对待，并使用 Webpack loader 进行处理；
对每个组件模拟出 CSS 作用域；
支持开发期组件的热重载。

简而言之，编写 Vue.js 应用程序时，组合使用 Webpack 和 vue-loader 能带来一个现代，灵活并且非常强大的前端工作流程。

####生产环境build想要file直接打开可运行技巧
修改config/index.js的assetsPublicPath设置为打包位置的绝对路径就可以了.

1 2	Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.