美文网首页
Vue2.0项目入门 — 从环境搭建到运行

Vue2.0项目入门 — 从环境搭建到运行

作者: 大青呐 | 来源:发表于2017-06-26 16:36 被阅读0次
    郁金香.png

    <h3>环境安装</h3>
    <blockquote>
    安装淘宝镜像
    大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
    下载地址https://npm.taobao.org/
    </blockquote>
    也可直接用npm安装:

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

    现在就可以使用cnpm命令安装模块了:

    cnpm install [name]
    

    安装webpack

    cnpm install webpack -g
    

    安装vue

      cnpm install vue
    

    全局安装 vue-cli

      cnpm install  vue-cli -g
    

    在磁盘新建一个空文件夹放工程用,并在终端进入该目录

    cd 目录路径
    

    创建一个基于 webpack 模板的新项目my-project

    vue init webpack my-project
    会有一些初始化的设置,如下可直接回车默认,或者按情况输入即可。

    a1.png

    进入项目目录

      cd my-project
    

    安装依赖

      cnpm install
    

    运行项目

    cnpm run dev
    

    成功启动项目后,将会在浏览器看到这个界面:


    a2.png

    有时项目没有启动成功,很有可能是相关编译打包工具没更新导致。
    解决办法:请运行以下命令

    npm update -g
    npm update vue-cli
    

    项目目录结构:

    a3.png
    <blockquote>
    <b>在实际开发之前,理解各个目录的作用是很重要的,下一章节在详细介绍下各个目录的组成和内容。
    Vue2.0项目入门 — 详解Vue-cli webpack模板</b>
    </blockquote>

    相关文章

      网友评论

          本文标题:Vue2.0项目入门 — 从环境搭建到运行

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