vuejs学习——vue+vuex+vue-router项目搭建(一)

前言

  快年末了却有新公司邀请了我,因此打算把上家公司的学到一下技术作一些总结和分享。vue

  如今vuejs都2.0了,我相信也有不少朋友和我同样实际项目仍是选择vue1.0的或者给新手一些参考,无论在选择哪一个版本的时候,但愿你都熟读了vue+vuex+vue-router的官方文档。下面咱们就开始吧。node

Vue搭建

  这里我假设咱们的电脑都安装了nodejs,那么我如今开始吧。webpack

  咱们先新建一个文件(VueProject),经过命令行的方式进入这个文件夹,如今假设咱们进入了VueProject文件夹,接下来进入正题吧。web

  进入安装vue的正题时,咱们先安装淘宝源,这样会加快咱们下载,在命令行中输入一下代码。vue-router

  $ npm install -g cnpm --registry=https://registry.npm.taobao.org

  官网是最好的老师,给出了完整的安装vue的步骤:vuex

    步骤1:cnpm install -g vue-clivue-cli

    步骤2:vue init webpacknpm

      进行到这步你会发现他有这样的提示:浏览器

      

    直接webpack下载的是最新版本 安装1.x要在webpack后面加#1.0,咱们安装的是1.x的项目这咱们使用 vue init webpack#1.0 go!bash

    步骤3:cnpm install

    步骤4:npm run dev

     

     命令行中看这个界面,恭喜你vue项目搭建好了,接下来咱们在浏览器中输入 localhost:8080 

端口修改

    localhost:8080 有可能其余软件占用了,致使其余问题的出现 咱们能够动态修改地址

    首先咱们的项目文件,在找到下图文件夹里的index.js
    

    打开index.js

    

    你会发如今dev中有port:8080,这就是咱们的端口,这里随便修改为你想要的端口便可。

界面展现

     浏览器中输入 localhost:****  回车!界面美美的。

    

  欧耶,vue搭建好了,你们赶快体验一下vue的美丽把。下一篇文章我以如今的基础继续搭建vue-router,咱们下一章见。

  新手写博客有什么表达不清,写的很差的,请你们多给给意见。

相关文章
相关标签/搜索