美文网首页前端攻城狮程序员我爱编程
Vue.js之使用vue-cli初始化项目

Vue.js之使用vue-cli初始化项目

作者: LemonnYan | 来源:发表于2018-03-26 19:28 被阅读240次

    一、安装步骤

    step1、安装Node.js

    首先需要下载并安装Node.js,下载地址:Node官网
    可查看我的另外一篇文章,仅作参考:Node.js入门及安装

    测试安装是否成功,打开cmd,使用 node -v,如果显示版本号则表示安装成功。


    image.png
    step2、安装vue-cli

    使用vue-cli(脚手架)搭建项目,vue-cli是Vue官方提供的用于搭建基于 vue+webpack+es6项目的脚手架工具。
    GitHub地址:vue-cli

    全局安装:-g 表示全局安装vue-cli

    npm install -g vue-cli
    

    如果安装较慢,可以使用淘宝镜像安装。

    cnpm install -g vue-cli
    
    step3、初始化项目

    初始化基于webpack的模板项目,projectName为项目名称,可以自动生成目录及相关文件,跟express生成器差不多。

    vue init webpack projectName
    

    在初始化的过程中会询问一些相关的说明和配置,这些说明和配置会写入package.json文件中,会自动生成对应的模块。


    image.png

    如果需要使用ESLint规范和相关的unit test 和e2e,请输入yes,这样初始化出来的项目,会自动配置好对应的模块。

    step4、 下载项目依赖模块

    定位到项目根目录,下载项目依赖的所有模块。

    npm install 
    
    image.png
    step5、运行项目

    定位到项目根目录下,使用命令:

    npm run dev
    
    image.png

    使用命令运行项目,在浏览器中输入http://localhost:8080可访问。

    image.png

    整体过程:

    # 全局安装 vue-cli
    npm install -g  vue-cli
    
    # 创建一个基于 webpack 模板的新项目
    vue init webpack projectName
    
    # 安装依赖,先定位到项目根目录,然后安装
    cd  projectName
    npm install
    
    #运行项目
    npm run dev
    

    二、目录说明

    项目文件需要放到 src 文件夹下,相关的部分静态资源需要放在static文件夹下。

    项目开发完成之后,可以输入 npm run build 来进行打包工作

    npm run build
    

    打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

    项目上线时,只需要将 dist 文件夹放到服务器就行了。

    image.png

    相关文章

      网友评论

        本文标题:Vue.js之使用vue-cli初始化项目

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