->vuejs2.0实战-从零开发todoApp应用并部署上线教程（一）:事前准备
<a href="http://www.jianshu.com/p/630a9ad2e9e3">vuejs2.0实战-从零开发todoApp应用并部署上线教程（二）:代码编写</a>
<a href="http://www.jianshu.com/p/e7222d1c5c35">vuejs2.0实战-从零开发todoApp应用并部署上线教程（三）:部署上线</a>
导语
这里将介绍技术开发中所用到的知识点以及碰到的一些小坑、小bug
写这个也是为了记录一下相关的难点，保不准以后还得上网去各种一通瞎找。
ps:如果教程存在什么疑问或者你有更好的办法，不妨留个言，批评一番。
And ，let's go~
项目简介
在线演示:<a href="http://bthinker.top/project/todoapp"> Live Demo</a>
建议使用Chrome、Firefox之类的浏览器访问
另外，这货在pc端显示有点别扭，可以在开发者模式中调用移动端预览
利用vue-js+elementUI制作一个移动端的Todo-app，为了降低难度，这里就不使用到后端如php类的语言.并将其部署发布到服务器，这里的服务器我用的是阿里云。当然，你也可以使用本地网络来访问。（ps,网上有一些免费的二级域名，之前自己曾经亲测过，不建议去折腾那些，国内的基本满满是广告套路，不稳定，国外的有些跑起来还很慢，还得搭个梯子。少年，充钱你才能变强 [手动滑稽]）
开发环境
开发环境系统: Ubuntu 16.04 64bit LTS
服务器系统版本: Ubuntu 14.04.5 64bit LTS
查看linux命令： more /etc/issue
ps: windows其实也差不多，不过为了开发方便一点，就使用了ubuntu了。有问题最好搭梯子问谷歌，实在懒就百度，不过讲真用谷歌能省很多时间
涉及到的技术和难点
- <a href="http://cn.vuejs.org/">vuejs-2.0官方文档</a>
- <a href="http://element.eleme.io/#/zh-CN">Element-UI官方开发文档</a>-1.1.6
- <a href="http://www.w3cplus.com/sassguide/">Scss-十分钟入门</a>-3.3.0
- <a href="http://www.linuxidc.com/Linux/2015-03/114988.htm">详解Linux下安装配置Nginx</a>
- <a href="https://my.oschina.net/blogshi/blog/260953">Ubuntu 如何安装最新版nodejs </a>
开始
-
安装nodejs
(国外的太慢，这里用的是淘宝镜像）
不建议使用sudo apt-get install nodejs方法，版本很老，按照网上一些办法更新了仓库再装，然并卵，（方法有误？？），参考了N多文章，总结安装最新版的方法如下：
cd ~
#下载
wget https://npm.taobao.org/mirrors/node/v7.5.0/node-v7.5.0-linux-x64.tar.xz#解压 *.tar.xz命令 xz -d node-v7.5.0-linux-x64.tar.xz #参数-f: 使用档案名字，切记，这个参数是最后一个参数，后面只能接档案名。 tar -zxvf ~/node-v7.5.0-linux-x64.tar.gz cd node-v7.5.0-linux-x64/bin ls ./node -v # 会出现v7.5.0，若失败，请检查文件位置以及Nodejs对应的系统版本是否匹配
软链接，以便全局使用，windows的话其实就是添加PATH路径
#链接node
sudo ln -s ~/node-v7.5.0-linux-x64/bin/node /usr/local/bin/node
#链接npm
sudo ln -s ~/node-v7.5.0-linux-x64/bin/npm /usr/local/bin/npm
#没有提示消息就对了，Unix的哲学之一，没有消息就是最好的消息
#也可以自己测试一下
cd ~
#成功的话会返回版本号
node -v
npm -v
- 改造龟速的NPM
装完之后，因为npm这个东西的服务器在国外，下载各种包真的慢到肝痛，幸好有阿里的前辈已经为我们栽好大树了。so~
建议安装使用cnpm（用法跟npm一致）
npm install cnpm -g --registry=https://registry.npm.taobao.org
或者直接更改npm的源
npm config set registry https://registry.npm.taobao.org
npm info underscore
#（如果上面配置正确这个命令会有字符串response）
-
安装Vue
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack todoapp #询问Install vue-router的时候，顺带装上 #此处有个坑，如果拒绝Use ESLint to lint your code的话，会在后面Npm run dev报错 #如果嫌ESlint规范太严谨，就调到none等级（通过↑↓方向键选择） # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev
ps,如果你在执行项目创建时出错，可能是因为你安装Nodejs时npm的全局路径不对，请参考另一篇文章:<a href="http://www.jianshu.com/p/999b81d7f283">vue init webpack myproject 出现错误的解决方案</a>
-
安装ElemntUI
cnpm i install element-ui -S
完整引入
在 main.js 中写入以下内容：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
render: h => h(App)
})
事前的准备到此大致差不多了,后续所需要的一些插件再按需求安装
网友评论