一、安装node

打开cmd输入node -v查看是否安装成功

显示node版本号表示安装成功,显示‘node’不是内部或外部命令表示未安装node。
node安装地址:http://nodejs.cn/download/
注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上。

二、vue-cli3.0全局安装

输入npm install -g @vue/cli命令全局安装,完成后输入vue -V(V大写)查看是否安装成功。

显示vue版本表示安装成功。

输入vue查看vue命令

三、开始创建项目

新建一个文件夹,cmd切换到该文件夹,输入vue create project-name命令。


按键盘上下键选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了(注:现在vue-cli3.0默认使用yarn下载),这里我们来选择手动下载。

四、进行配置选择

你项目中用到哪些就选择相应的进行配置就行了(注:空格键是选中与取消,A键是全选)。

五、选择css预处理,这里我选择stylus

六、选择ESLint + Prettier

七、选择语法检查方式,这里我选择第一个保存就检测

八、选择把Babel、PostCss、ESLint这些配置的文件放哪里,这里我选择第一个独立放置文件

九、是否记录以便下次继续使用这套配置(选择Y需要输入保存名字,N不记录)

十、等待下载依赖模块

十一、cd到project-name然后npm run serve启动项目

十二、修改端口,在根目录下创建vue.config.js

官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions

vue脚手架3.0的搭建的更多相关文章

  1. Vue脚手架(vue-cli)搭建和目录结构详解

    一.环境搭建 1.安装node.npm.webpack,不多说 2.安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V( ...

  2. React/VUE 脚手架2.0和3.0

    react官方脚手架 npm install -g create-react-app create-react-app my-app cd my-app npm start 区别自己对比 vue2.x ...

  3. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  4. vue脚手架3.0的安装与使用

    一.安装 1.先检查是否有安装vue  (vue-cli3需要node大于等于8.9版本) //vue -V 2.如果没安装跳过.安装有3.0以下的版本就的先卸载掉以前的版本 npm uninstal ...

  5. vue-cli3.0 vue脚手架3.0的使用

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn globaladd @vue/cli 安装成功后查看版本:vue -V(大写的V)     2.命令 ...

  6. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  7. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

  8. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  9. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

随机推荐

  1. 使用HANDLECOLLISIONS的几个场景

    使用HANDLECOLLISIONS的几个场景: 1.target丢失delete记录(missing delete),忽略该问题并不记录到discardfile 2.target丢失update记录 ...

  2. 移动端viewport解惑

    我们在做移动端webapp的时候需要设置这么一段: <meta name="viewport" content="width=device-width, initi ...

  3. 华为nova 4取代刘海屏

    尽管首发被三星“截胡”,但华为依然是第一批发布“打孔屏”新机的厂商.官方已经确认,将于12月17日在长沙发布华为nova 4,主打自拍极点全面屏. 继真机谍照.配置曝光之后,今日华为官方发布一则华为n ...

  4. 今日SGU 5.30

    SGU 190 题意:给你个n*n的矩形,然后上面有几个点不能放东西,然后问你能不能用1*2的矩形,把能放 东西的地方放满 收获:一开始想的是,dfs,然后感觉这样的话,代码很长,而且很容易超时, 看 ...

  5. 修改cloudera manager的端口号

    最近想在测试机装一个hadoop测试集群debug玩玩,然后就用cloudera manager装吧 这回使用rpm安装失败了,在网上搜到Cloudera Manager 5和CDH5离线安装说需要用 ...

  6. Hadoop2 伪分布式部署

    一.简单介绍 二.安装部署 三.执行hadoop样例并測试部署环境 四.注意的地方 一.简单介绍 Hadoop是一个由Apache基金会所开发的分布式系统基础架构,Hadoop的框架最核心的设计就是: ...

  7. vue2.0-transition动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. nyoj--19--擅长排列的小明(dfs)

    擅长排列的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想为难 ...

  9. 用Struts2搭建一个登录例子【本人亲测好用】

    今天尝试struts2的搭建,遇到不少的问题,终于一一解决,逛了很多地方,最终完成搭建 1.首先要下载struts2的一些组件,我下载的是版本2.3.4.1,Eclipse是4.6版本的.由于版本的不 ...

  10. 对Jscript操作注册表接口的一点不解

    作者:朱金灿 来源:http://blog.csdn.net/clever101 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作.Wshshell ...