在上两篇博文中已经安装了node.js、webpack、vue-cli,安装的版本为:

今天通过这篇博文创建项目。

1.选择路径

首先通过命令行进入想要创建项目的路径,例如:

通过e:命令进入盘幅,再经过cd命令进入文件夹。

2.创建项目

通过命令vue init webpack pm,其中pm为你创建项目的项目名称,在执行命令后vue-cli会下载模板,之后进行项目信息设置:

  1.  
    设置项目名称
  2.  
    ? Project name pmtext
  3.  
    设置项目描述
  4.  
    ? Project description intracompany
  5.  
    作者
  6.  
    ? Author hys
  7.  
    ? Vue build (Use arrow keys)
  8.  
    ? Vue build standalone
  9.  
    设置路由
  10.  
     ? Install vue-router? Yes
  11.  
     
  12.  
     ? Use ESLint to lint your code? No
  13.  
    单元测试
  14.  
     ? Set up unit tests Yes
  15.  
    ? Pick a test runner jest
  16.  
    ? Setup e2e tests with Nightwatch? Yes
  17.  
    ? Should we run `npm install` for you after the project has been created? (recom
  18.  
    ? Should we run `npm install` for you after the project has been created? (recom
  19.  
    ? Should we run `npm install` for you after the project has been created? (recom
  20.  
    ? Should we run `npm install` for you after the project has been created? (recom
  21.  
     
  22.  
    mended) no  (此处应该选择no
  23.  
     
  24.  
    vue-cli · Generated "pmtext".
  25.  
     
  26.  
    # Project initialization finished!
  27.  
    # ========================
  28.  
     
  29.  
    To get started:
  30.  
    提示下一步操作
  31.  
    进入pmtext文件夹
  32.  
     cd pmtext
  33.  
    初始化项目
  34.  
     npm install (or if using yarn: yarn)
  35.  
    运行项目
  36.  
     npm run dev

执行上面内容后即完成了项目的所有内容,按照链接即可打开项目。

bug

如果在执行:

vue init webpack pm 卡死,说明node.js的版本有问题,尝试其他稳定版,即可以解决此问题。

报错:

  1.  
    39365 error code ELIFECYCLE
  2.  
    39366 error errno 1
  3.  
    39367 error chromedriver@2.38.3 install: `node install.js`
  4.  
    39367 error Exit status 1
  5.  
    39368 error Failed at the chromedriver@2.38.3 install script.
  6.  
    39368 error This is probably not a problem with npm. There is likely additional logging output above.

解决链接

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver


51.webpack vue-cli创建项目的更多相关文章

  1. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  2. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  3. vue/cli创建项目过程

            ①vue create demo    vue版本:3.9.3,node版本:12.8.0         ②Manually select features         ③Bab ...

  4. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  5. Vue.之.创建项目

    Vue.之.创建项目 第一次使用vue的时候,在已完成node的情况下,还需要在进行安装vue. 指令:cnpm install vue-cli -g      //全局安装 vue-cli 检查vu ...

  6. 初学Vue.js,用 vue ui 创建项目会不会被鄙视

    全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...

  7. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  8. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  9. Vue脚手架创建项目出现 (Failed to download repo vuejs-templates/webpack: Response code 404)

    搭建好(脚手架2.X版本)环境像往常一样使用vue init webpack xxxx 创建项目可以是没多久就开始报错了 报错结果就是:vue-cli · Failed to download rep ...

  10. vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

    1. 全局安装vue-cli yarn global add @vue/cli // 检查安装是否成功 vue -V // 3.2.2 2. 初始化 vue ui 执行命令 vue ui 2.1 该命 ...

随机推荐

  1. 力导向图Demo

    <html> <head> <meta charset="utf-8"> <title>力导向图</title> < ...

  2. DR、BDR、SBR、ASBR等名词的解释和原理

    DR是指定路由器的意思是为了解决LSA在一个area里浪费很大的带宽而设计的 BDR是备份指定路由器,就是DR的一个备用.DR和BDR只在广播网和NBMA网络中有,而P2P和P2MP中是没有的. AB ...

  3. Eclipse Maven profiles 多环境配置,测试环境与开发环境分开打包

    1.将开发环境.测试环境.生产环境的配置文件分开存放,如下图: 2.在Maven中配置不同的环境打包配置文件的路径,配置如下: <profiles> <profile> < ...

  4. springboot-async

    在项目中,当访问其他人的接口较慢或者做耗时任务时,不想程序一直卡在耗时任务上,想程序能够并行执行, 我们可以使用多线程来并行的处理任务,也可以使用spring提供的异步处理方式@Async. Spri ...

  5. 将RAC软件转换为单实例软件

    将RAC软件转换为单实例软件 http://blog.itpub.net/26736162/viewspace-2155632/ 1. Stop database and CRS on both no ...

  6. npm太慢, 修改npm镜像

    今天晚上想要将clone下来的项目进行npm install,但是等了半天都没动 查看源 npm config get registry 或 npm config list https://regis ...

  7. 如何查看已经安装的nginx、apache、mysql和php的编译参数

    1.nginx编译参数: nginx -V(大写) #注意:需保证nginx在环境变量中,或者使用这样的形式:/user/local/nginx/sbin/nginx -V 2.apache编译参数 ...

  8. linux shell的here document用法(cat << EOF)

    什么是Here Document?Here Document 是在Linux Shell 中的一种特殊的重定向方式,它的基本的形式如下cmd << delimiter  Here Docu ...

  9. k8s(4)-使用服务公开应用程序

    Kubernetes中的服务是一个抽象,它定义了一组逻辑Pod和一个访问它们的策略.服务允许从属Pod之间的松散耦合.与所有Kubernetes对象一样,使用YAML (首选)或JSON 定义服务.服 ...

  10. StringUtils 工具类的常用方法(转载)

    http://guobin6125.iteye.com/blog/1535792