zoukankan      html  css  js  c++  java
  • vue-cli安装以及搭建vue项目详细步骤

    1. vue init webpack projectname(projectname是你项目的名称)

      创建项目卡住不动解决方案:

      https://cli.vuejs.org/zh/guide/installation.html

      Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

      可以使用下列任一命令安装这个新的包:

      npm install -g @vue/cli
      # OR
      yarn global add @vue/cli

      第一步,检查node.js是否安装,通过命令提示符,node -v   npm -v查看,如果没有请先安装node.js,如下图.

    2.  

      第二步,把npm换成cnpm,

      命令工具输入npm install -g cnpm --registry=https://registry.npm.taobao.org

      然后cnpm -v查看版本,如下图

    3.  

      第三步,全局安装webpack,

      使用命令工具输入cnpm install webpack -g。

      使用webpack -v查看版本

      如果webpack版本4以上,需要安装webpack-cli 依赖 

      使用命令工具输入cnpm install webpack webpack-cli -g 如下图

    4.  

      第四步,安装vue-cli

      使用命令工具输入cnpm install vue-cli -g

      使用vue -V(这个V大写),如下图

    5.  

      第五步,上面步骤安装完后,就可以利用vue-cli初始化vue项目

      在你想要安装项目的而目录下输入vue init webpack projectname(projectname是你项目的名称),

      Project name:——项目名称

      Project description:——项目描述

      Author:——作者

      Vue build:——构建模式,一般默认选择第一种

      Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到

      Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度

      Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装

      如下图

    6. 6

      第六步,选择上一张图片的NO,I will handle that myself

      然后输入cd projectname(你项目名称)

      然后再输入cnpm install

      如下图

    7. 7

      第七步,输入cnpm run dev

      最后在网址打开http://127.0.0.1:8080/如下图

    8. 8

      最后附上项目的结构目录,如下图

  • 相关阅读:
    Python UDP Server Client
    Django点滴(五)建模
    机房收费系统中的数据库操作
    一个普通的工科应届生
    Zebra命令模式分析(二)[补]
    php 备份mysql数据库(joomla数据库可直接使用,其他数据库稍作修改即可)
    dalvik直接跑hello world并用jdb调试
    动态规划小结(1)最大子段和
    struts返回对象json格式数据
    有关public接口和友元类的讨论
  • 原文地址:https://www.cnblogs.com/jasonLiu2018/p/11064753.html
Copyright © 2011-2022 走看看