初学者搭建vue环境

作者: 菜菜___ | 来源:发表于2019-01-01 22:50 被阅读7次

    第一步准备工作

    node环境安装:

    1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装
    1.2 如果本机已经安装node的运行换,请更新至最新的node 版本
    下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/
    一键式傻瓜操作下一步下一步...完成安装

    git的环境安装:

    为了快乐的使用命令行,我们推荐使用 gitbas,也是因为有的工具需要到github上下载安装,所以推荐安装使用git。
    下载地址: https://git-for-windows.githu...
    安装完成的显示是:

    image.png
    看到 Git Bash Here 。说明我们已经安装成功git,下面就是检查我们安装的node是否安装成功:
    1.1 鼠标右键打开git bash here窗口,在终端输入 node -v
    T430@T430-PC MINGW64 ~/Desktop
    $ node -v
    v8.11.3
    T430@T430-PC MINGW64 ~/Desktop
    $
    

    输出版本号,说明我们安装node 环境成功,顺便还可以查看 npm 的 版本号:npm -v

    T430@T430-PC MINGW64 ~/Desktop
    $ npm -v
    4.6.1
    T430@T430-PC MINGW64 ~/Desktop
    $
    

    第二步正式安装

    vue-cli脚手架安装:

    如果访问外网比较慢,可以使用淘宝的镜像 https://npm.taobao.org/
    打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org
    回车之后,我们就可以用 cnpm 替代 npm

    T430@T430-PC MINGW64 ~/Desktop
    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    T430@T430-PC MINGW64 ~/Desktop
    $
    
    image.png

    恭喜你,你已经成功安装了 cnpm。以后在项目中下载vue的插件以及项目中需要npm的操作的时候,你都可以使用 cnpm 比npm的速度要快多了,
    注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm
    如何更新npm的方法: 可以使用 npm install -g npm 来更新版本
    以下操作我还是用npm来演示:

    安装vue-cli:npm install vue-cli -g

    T430@T430-PC MINGW64 ~/Desktop
    $ npm install vue-cli -g
    
    image.png

    已经安装成功!!!

    第三步验证vue环境

    建立一个demo项目

    1.1在自己的工作空间中新建一个文件夹(自己任意命名即可,不推荐使用中文命名)
    1.2 点击文件夹进入我们的项目目录,右键 Git Bash Here
    1.3 初始化项目 vue init webpack vue-demo(vue官网推荐的demo),一直回车到出现 :Install vue-router? (Y/n):

    T430@T430-PC MINGW64 /f/vue
    $  vue init webpack vue-demo
    ? Project name (vue-demo)
    ? Project name vue-demo
    ? Project description (A Vue.js project)
    ? Project description A Vue.js project
    ? Author (<***********.com>)
    ? Author <***********.com>
    ? Vue build (Use arrow keys)
    ? Vue build standalone
    ? Install vue-router? (Y/n)
    

    回车到这一步之后就要让我们自己选择工作空间所需要的东西了。
    是否要安装 vue-router 项目中肯定要使用到 所以 y 回车
    是否需要 js 语法检测 目前我们不需要 所以 n 回车
    是否安装 单元测试工具 目前我们不需要 所以 n 回车
    是否需要 端到端测试工具 目前我们不需要 所以 n 回车

    $  vue init webpack vue-demo
    .
    .
    .
    ? Install vue-router? (Y/n) y
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? (Y/n) n
    ? Use ESLint to lint your code? No
    ? Set up unit tests (Y/n) n
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? (Y/n) n
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recom
    ? Should we run `npm install` for you after the project has been created? (recom
    mended) npm
    

    1.4运行我们所创建的项目
    进入到我们的项目当中:cd vue-demo ,在执行 npm install(下载本地vue运行环境和一些运行vue所需的包)

    T430@T430-PC MINGW64 /f/vue
    $ cd vue-demo/
    T430@T430-PC MINGW64 /f/vue/vue-demo
    $ npm install
    
    image.png

    下载安装成功,接下来执行 npm run dev 启动这个项目

    T430@T430-PC MINGW64 /f/vue/vue-demo
    $ npm run dev
    > vue-demo@1.0.0 dev F:\vue\vue-demo
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    .
    .
    .
    Listening at http://localhost:8080
    

    浏览器自动打开


    image.png

    恭喜,你已经成功安装,并运行起来vue基础项目。

    原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
    95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
    欢迎留言交流。

    相关文章

      网友评论

        本文标题:初学者搭建vue环境

        本文链接:https://www.haomeiwen.com/subject/jqsolqtx.html