• Vue2.0使用vue-cli + webpack搭建项目


    Vue2.0使用vue-cli + webpack搭建项目

    说明:总结搭建vue2.0项目的步骤

    一、安装环境

    1、这个问题不需要多少,必备的node环境及npm

    2、全局安装webpack

    打开终端(或cmd)输入: npm install webpack -g ,等待安装完成再输入:webpack -v 查看版本号,如果出现版本号则说明安装成功

    3、全局安装vue-cli脚手架

    终端(或cmd)输入:npm install vue-cli -g, 安装完成后输入: vue -V, 如果出现相应版本号则说明安装成功

    二、使用vue-cli构建项目

    1、在桌面或磁盘任意盘符下新建一个文件夹,使用终端(或cmd)cd到新建的文件夹下

    2、终端(或cmd)输入:vue init webpack 工程名字 在新建文件夹下安装vue-cli,这里需要注意工程的名字不要出现中文,其他可以随便起,输入完成后回车会出现如下的提示:

    $ vue init webpack vue2.0 ----安装vue-cli

    This will install Vue 2.x version of the template. ----提示创建vue项目说明

    ? Project name (vue2.0) ----项目名称,如果不输入直接回车则默认vue2.0

    ? Project name vue2.0

    ? Project description (A Vue.js project) ----项目描述,可写可不写

    ?Project description A Vue.js project

    ?Author Datura ----项目创建者,可写可不写

    ?Author Datura

    ?Vue build (Use arrow keys)

    ? Vue build standalone

    ? Install vue-router? (Y/n) Y ----是否安装Vue路由,我选择的是

    ? Install vue-router? Yes

    ? Use ESLint to lint your code? (Y/n) n ----是否启用eslint检测,我选择的是no

    ? Use ESLint to lint your code? No

    ? Setup unit tests with Karma + Mocha? (Y/n) Y

    ? Setup unit tests with Karma + Mocha? Yes

    ? Setup e2e tests with Nightwatch? (Y/n)

    ? Setup e2e tests with Nightwatch? Yes

    vue-cli · Generated "vue2.0".

    To get started: ----提示如何进入项目并启动项目

    cd vue2.0 ----进入到项目根目录下

    npm install ----安装项目依赖文件

    npm run dev ----启动项目,默认端口是8080,如果电脑目前有其他的项目占用了8080端口,项目启动会报错,可以在项目中config > index.js中找到port:8080直接修改成其他端口就可以了

    三、至此项目初始结构的搭建已完成,上一张项目运行起来的效果图

  • 相关阅读:
    微信分享相关
    移动端界面适配
    MongoDB安装使用
    MongoDB可视化工具RoboMongo
    PhotoSwipe图片展示插件
    BootStrap下拉框搜索功能
    Node.js 特点
    原生node实现本地静态页面的展示
    阿里巴巴电话初面
    react动态添加多个输入框
  • 原文地址:https://www.cnblogs.com/wuyu1787/p/6687996.html
Copyright © 2020-2023  润新知