工欲善其事,必先利其器,vue大型单页应用,需要做一些工具配置。
1、安装git、nodejs(最新版的nodejs都包含了npm)。这两个工具安装都非常简单,官网下包,运行,然后next...
2、安装官方提供的快速构建工具vue-cli。在任意位置npm安装命令:npm install -g vue-cli (-g代表全局安装,未带该参数则是在当前路径下下载vue-cli包)
3、接下来就可以用刚装的vue-cli包进行快速构建你自己的项目:vue init <webpack> <your-projectname> (<>代表你可以根据项目需要选择不同的模板和项目名称进行构建)
上述命令会从vuejs-templates拉取模板并安装,所有的官方模板都可以在vuejs-templates organization找到,也可以运行vue list
命令来看看现在有哪些官方模板是现在可用的
4、可以在当前目录看你刚构建的项目,现在的模板项目还不完善,需要安装他们依赖的项目包,还好这个事情package.json文件已经帮你配置好了,这时仅需要
a、进入到项目:cd your-projectname(如果已在项目内启动git bash,则这步省略) b、安装模板项目所需要的依赖:npm install
5、所有问题都已经处理好,这时就需要编译运行(这里的编译指的是广义上的,如果直接打开index.html文件无法浏览,需要将vue拆分成浏览器识别的js、css、html)。查看package.json可以看到模板已帮我们配置好
a、开发阶段:npm run dev (该种方式不会真正的生成打包后的文件,适合开发阶段) b、生产部署:npm run build(该种阶段会根据配置生成打包后的代码文件,配置在config/index.js中配置)
生产部署命令打包官网的配置路径稍有不对,如果想生产部署生成的index.html文件双击运行正确,需要修改一处配置,地址:http://www.w3cfuns.com/notes/15904/fbb4d15b9c22fd373b605805bde8fd44.html
6、基本的前期构建已完成,接下来就是项目开发,尤大大给我们提供了很多很好的工具:VueRouter(类似angular router)VueResource(类似angular $http)
更多优势可看:http://sugarball.me/vue-jsxue-xi-bi-ji-1-da-jia-vue-jskai-fa-kuang-jia/
学习资料:
vue官方教程:https://vuejs.org.cn/guide/installation.html
vue官方模板:https://github.com/vuejs-templates
webpack入门:http://www.w3cfuns.com/notes/15904/cad84afddab13604f987cbf511d265e4.html
vue-router:http://router.vuejs.org/zh-cn/basic.html