精华内容
下载资源
问答
  • vue-cli 3 VUE脚手架项目搭建(详解)

    千次阅读 2020-06-11 23:28:16
    vue-cli 3 VUE脚手架 注: vue cli3 需要node8.9或者以上版本 vue-cli版本检查 // 命令行 vue -V // 查看当前版本 npm uninstall -g vue-cli //卸载之前的 npm install -g @vue/cli //安装最新的 开始构建项目 vue ...

    vue-cli 3 VUE脚手架

    注: vue cli3 需要node8.9或者以上版本

    vue-cli版本检查

    // 命令行
    vue -V  // 查看当前版本
    npm uninstall -g vue-cli  //卸载之前的
    npm install -g @vue/cli   //安装最新的
    

    开始构建项目
    vue create ‘项目名’ 回车创建
    在这里插入图片描述
    配置

    • default 是默认配置
    • Manually select features 是自己手动选择
      (上下箭头切换,回车确定)
      在这里插入图片描述
      手动配置:
      需要什么自己选择(上下箭头切换 空格选中 )
    • babel:转换es6语法的这个必须要
    • typescript 看自己需不需要用
    • router管理路由的也选上
    • vuex状态管理就看自己需不需要用
    • css pre样式预处理器这个也加上
    • linter/Formatter统一代码风格
    • 最后2个分别是单元测试和端对端测试。 示例选择了几个常用的 然后回车确认
      在这里插入图片描述
      路由使用历史模式吗?
      路由模式分为Hash模式 History(历史)模式 Abstract模式 三种
      hash模式最明显的特点就是url上会带有#号, History历史模式的url就跟正常的访问地址一样。
      示例不使用历史模式,所以选的n在这里插入图片描述
      选择css预处理器 我选的less
      在这里插入图片描述
      选择语法检测工具
    • ESLint with error prevention only(只检测错误)
    • ESLint + Standard config 自带linter和自动代码纠正,没有配置,自动格式化代码,可在编码早起发现规范问题和低级错误
    • ESLint + Prettier 能统团队的代码风格

    示例选择 ESLint + Prettier
    在这里插入图片描述
    选择语法检查方式

    • Lint on save (保存就检测)
    • Lint and fex on commit ( 用户提交文件到git的时候检测 )
      示例选择 Lint on save
      在这里插入图片描述
      babel,postcss,eslint配置文件存放位置
    • in dedicated config files(在专用配置文件中,就是单独管理)
    • in package.json(放在package.json里)
      示例选择:in dedicated config files
      在这里插入图片描述
      保存为未来项目的预配置
      在这里插入图片描述
      安装成功
      yarn run serve启动项目
    展开全文
  • 二,项目搭建过程 由于 git bash 来执行命令的时候无法使用键盘上下键来进行选项选择,所以我们要使用 cmd / powershell,这里使用 powershell 1.vue create + 项目名称 2.模板选择,通过键盘上下键来选择,我们...

    一. 安装vue3.0脚手架

    如果之前安装了2.0的脚手架,要先卸载掉,输入:npm uninstall vue-cli -g 进行全局卸载
    然后重新安装: npm install @vue/cli -g

    二,项目搭建过程

    由于 git bash 来执行命令的时候无法使用键盘上下键来进行选项选择,所以我们要使用 cmd / powershell,这里使用 cmd

    1.vue create + 项目名称
    在这里插入图片描述

    2.模板选择,通过键盘上下键来选择,我们选择第三个 自定义
    这三个选择分别是 vue2 / vue3 默认模板 / Manually select features 手动选择(自定义)的意思
    在这里插入图片描述

    3.选择我们需要的默认配置(通过空格键 来选中)
    在这里插入图片描述
    4. vue本版的选择,我们选择 vue3
    在这里插入图片描述

    5.是否使用 class 风格的component,不使用,输入N
    在这里插入图片描述
    6.是否使用 babel来处理我们的 ts 代码,选择,输入Y
    在这里插入图片描述
    7.是不是用history模式来创建路由,不使用,输入n,后续需要使用可以在配置中做修改
    在这里插入图片描述
    8.选择 css 处理器,这里选择 less
    在这里插入图片描述
    9.选择代码检测方式,我选择 eslint = prettier
    在这里插入图片描述
    10.选择什么时候对代码做 eslint,这里选择保存代码的时候
    在这里插入图片描述
    11.对于刚才选择的配置,是选择生成独立的配置文件,还是保存到pack.json中,这里选择独立的文件
    在这里插入图片描述

    12.最后一步是 是否将本次配置保存成一个预设,选择不保存,输入N,敲下回车,就开始创建项目了
    在这里插入图片描述

    三,项目搭建完成后代码规范配置

    查看配置教程

    展开全文
  • VUE3.0的脚手架构建的最基本的初始项目压缩包,不包含router路由,解压运行,npm install,npm run dev即可运行
  • 主要介绍了vue-cli3.0 脚手架搭建项目的过程,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。 创建项目步骤如下: 1、安装Vue CLI脚手架 指令:cnpm i -g @...

    什么是vue脚手架:

    vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

    创建项目步骤如下:

    1、安装Vue CLI脚手架

    指令:cnpm i -g @vue/cli
    一共35个文件在这里插入图片描述

    2、创建Vue项目

    指令:vue create 项目名
    若手动选择功能,步骤如下手动选择功能
    选择功能。通过上下键控制位置,空格键来确定 是否选在这里插入图片描述
    选择vue本版选择vue版本,这里选2.0
    第一个yes是选择路由模式,n是选择哈希模式在这里插入图片描述
    这一步是按照这两个指令去运行,第一个指令是进入项目,第二个指令是运行项目在这里插入图片描述
    运行上面两个命令之后,即获得端口号,复制到浏览器打开即可在这里插入图片描述
    出现这个页面即证明创建成功:在这里插入图片描述
    注: vue脚手架是要在node环境下运行

    展开全文
  • 突然热血来潮,实操了一把vue脚手架搭建全新vue项目,现将详细步骤贴出 一.node环境安装。 用vue-cli构建的项目是以node.js为基础的,可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包...

    突然热血来潮,实操了一把vue脚手架搭建全新vue项目,现将详细步骤贴出(审核不通过也是醉了),富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善

    一.node环境安装。
    用vue-cli构建的项目是以node.js为基础的,可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包编译都与其有密切关系,总体说node.js为前端工程化提供了必要条件。之前看到过vue.js、webpack实现、node.js三者的关系:vue.js工程化=>webpack实现=>node.js(webpack基础)

    1.下载地址:https://nodejs.org/en/
    2.检查node环境安装是否成功:npm包管理器是集成在node中的,所以直接输入npm -v 就能查看到版本信息,node同样如此
    在这里插入图片描述
    温馨提示:node的版本尽量高点,个人建议v8.9或者v10.0.0版本亲测好用,否则会出现不兼容情况很麻烦滴···
    3.使用node安装依赖时访问的是~~~(发布不出去,哭唧唧:富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善),或者由于网速原因导致下载失败,小编使用的是dl(富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善)访问下载,当然也可以使用淘宝镜像代理http://npm.taobao.org/,输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

    ···接下来就是重头戏了···

    二.搭建vue项目环境

    1.全局安装vue-cli (输入:npm install --global vue-cli)
    在这里插入图片描述
    2.接下来就是进入你的项目目录中,创建一个基于webpack模板的新项目:vue init webpack+项目名

    .我的项目放在了E盘下的Demo文件夹中,进入步骤都会8,我也贴出来:dir可以看到你该盘下的所有文件
    

    在这里插入图片描述
    ok,进入到项目目录中后,执行vue init webpack+项目名命令:
    在这里插入图片描述
    解释说明:
    Vue build: 打包方式,回车即可;

    Project name:项目名称;

    Project description:项目描述;

    Author:作者;

    Install vue-router : 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

    Use ESLint to lint your code : 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

    Set up unit tests : 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

    Setup e2e tests with Nightwatch : 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
        
    3.根据提示操作即可:进入项目–cd vue-demo,启动项目–npm run dev
    在这里插入图片描述
    4.我们的目录文件,至此就创建成功
    在这里插入图片描述
    5.启动成功效果图
    在这里插入图片描述

    三.vue项目目录讲解
    我们的vue项目文件目录如上图所示,对主要部分解释说明。

    ├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
    │   └── build.js                # 生产环境构建脚本
    |   └── check-versions.js  		# 检查npm、node.js
    |   └── utils.js 				# 构建相关工具方法
    |	└── vue-loader.conf.js		# 配置了css加载器以及编译css之后自动添加前缀
    |   └── webpack.base.conf.js	# webpack的基本配置
    |	└── webpack.dev.conf.js		# webpack开发环境配置
    | 	└── webpack.prod.conf.js 	# webpack生产环境配置
    ├── config/                     
    │   ├── index.js                # 项目核心配置(项目配置文件)
    │   └── dev.env.js				# 开发环境变量
    | 	└── prod.env.js				# 生产环境变量
    ├ ── node_module/               #项目中安装的依赖模块(加载的项目依赖模块)
       ── src/						# 这里是我们的主要开发目录,基本上要做的事情都在这个模块里边,主要包含了目录文件
    │   ├── main.js                 # 程序入口文件(入口js文件)
    │   ├── App.vue                 # 程序入口vue组件,是根组件
    │   ├── router					# 前端路由,我们需要配置的路由路径写在index.js文件里
    │   ├── components/             # 组件目录,我们写的组件就放在这个目录里(可封装我们的公共组件)
    │   │   └── ...
    │   └── assets/                 # 资源文件夹,放置一些图片或者公共js、公共css。这里的资源会被webpack构建
    │       └── ...
    ├── static/                     # 纯静态资源 ,如图片、字体等(直接拷贝到dist/static/里面)。不会被webpack构建
    ├── test/
    │   └── unit/                   # 单元测试
    │   │   ├── specs/              # 测试规范
    │   │   ├── index.js            # 测试入口文件
    │   │   └── karma.conf.js       # 测试运行配置文件
    │   └── e2e/                    # 端到端测试
    │   │   ├── specs/              # 测试规范
    │   │   ├── custom-assertions/  # 端到端测试自定义断言
    │   │   ├── runner.js           # 运行测试的脚本
    │   │   └── nightwatch.conf.js  # 运行测试的配置文件
    ├── .babelrc                    # babel 配置文件
    ├── .editorconfig               # 编辑配置文件
    ├── .gitignore                  # 用来过滤一些版本控制的文件,比如node_modules文件夹 
    ├── index.html                  # 入口模板文件(首页入口文件,可以添加一些meta信息等)
    └── package.json                # 项目文件,记载着一些命令和依赖还有简要的项目描述信息(npm包配置文件,定义一些项目npm脚本、依赖包等信息) 
    └── README.md                   #介绍自己这个项目的,可参照github上star多的项目。
    
    

    可以开始我们的vue项目啦—自由发挥,小编的vue项目将会在后面贴出来···,可以稍稍关注哦!

    展开全文
  • 使用vue脚手架搭建项目的方法:1、全局安装vue-cli脚手架;2、打开命令提示符,通过cd命令进入项目所在文件夹;3、创建vue-cli工程项目;4、安装依赖;5、启动项目。本教程操作环境:windows10系统、vue2.9版,该...
  • 使用vue脚手架搭建项目详解

    千次阅读 多人点赞 2020-02-24 09:44:12
    安装vue脚手架 这里的版本是vue cli4 cnpm i @vue/cli -g 启动vue脚手架图形化界面 打开命令行,输入以下命令 vue ui 通过vue脚手架图形化界面创建项目 选择项目目录 ...
  • 前言 这几年一直在it行业里摸爬滚打,一路走来,不少总结了一些python行业里的高频面试,看到大部分初入行的新鲜血液,还在为各样的面试题答案或收录有各种困难问题 于是乎,我自己开发了一款面试宝典,...vue脚手架
  • vue-cli3搭建vue项目脚手架
  • 一、vue模块化配置脚手架 使用流程:npm install vue-cli -g 安装vue命令环境 验证是否安装成功: vue --version (安装成功后以后都不需要再安装了) 二、生成项目模板 vue init <模板名> 本地文件夹名称 ...
  • 今天小编就为大家分享一篇vue-cli脚手架搭建项目去除eslint验证的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue脚手架搭建项目的兼容性配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue脚手架(vue-cli)搭建项目,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本篇文章主要介绍了使用vue-cli(vue脚手架)快速搭建项目的方法,vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,感兴趣的小伙伴们可以参考一下
  • 使用vue-cli(vue脚手架)快速搭建项目

    千次阅读 多人点赞 2021-10-03 12:51:57
    5、脚手架依赖于node.js和webpack 二、安装Vue CLI脚手架 //默认安装脚手架3 npm install -g @vue/cli //安装脚手架2 npm install -g @vue/cli-init //脚手架2创建项目 vue init webpack my-project //脚手架3创建...
  • vue脚手架3.0快速搭建项目详解

    千次阅读 2020-10-28 16:41:33
    这篇文章主要介绍下vue-cli3.0项目搭建项目结构和配置等整理一下 **转载于:**https://www.cnblogs.com/coober/p/10875647.html 一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: CLI:...
  • vue脚手架搭建vue项目框架

    千次阅读 2019-03-01 14:30:51
    vue.js开发环境搭建 1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm --registry=...
  • 本篇文章主要介绍了详解使用vue脚手架工具搭建vue-webpack项目,非常具有实用价值,需要的朋友可以参考下
  • cnpm install -g @vue/cli 第六步:新建一个脚手架项目 先输入cd Desktop,回车,表示这个文件建在桌面, 然后再命令行输入(firstvue为项目名,自己任取) vue create firstvue 根据提示,键盘上下键选择vue3,回车...
  • vue模板写在字符串中,没有智能提示,没有代码着色 难以把样式集成到vue组件中 开发的代码:阅读性、结构清晰 运行的代码:体积小,能执行就行 这些问题的本质: 开发的代码和运行的代码要求不同 所以,需要一个工具...
  • 基于Vue-cli3建造的前端开发脚手架项目模板,主要包括以下内容:Webpack4.x性能调优配置,Vue.js全家桶,移动端vw适应,单元测试等功能,可以参考,欢迎大家围观指教! 项目特点 特征 巴别塔 VueRouter 威克斯 ...
  • 1.首先,打开命令行工具(win+r,然后输入cmd), ...注意:在官网下载安装node.js后,就已经自带npm (包管理工具)了,另需注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。 3.然后,安装淘宝...
  • vue脚手架搭建过程 1.检查vue -V判断当前设备是否有vue环境,如果没有就执行 cnpm install -g @vue/cli 2.再次检查vue -V看是否创建成功 3.创建vue项目的途径有vue ui(vue自己的图像界面化的工具),第二个是vue ...
  • (图片的上一级目录是VUE-ERP,你的项目名不一样) 3、下载依赖。 输入命令: cnpm install(cnpm下载有时莫名其妙的出bug) npm install (很慢,小型项目还行) yarn (要先下载yarn才能用,建议,很好用) 3.1 为...
  • 使用vue-cli创建模板项目 1、什么是vue-cli 是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。 2、全局安装vue-cli (1)检查npm 版本,建议安装到最新版本。 【命令行...
  • vue脚手架项目搭建以及常见命令

    千次阅读 2020-03-06 14:10:10
    (2)、全局安装vue脚手架:npm install -g vue-cli 或者指定版本:npm i vue-cli@2.9.6 -g; (3)、安装以后,输入:vue -V 出现相应的版本号,则表示安装成功; (4)、卸载脚手架:npm uninstall -g vue-cli; 2...
  • vue脚手架搭建 1.Vue.js是一套构建用户界面的渐进式框架。 2.Vue 只关注视图层,采用自底向上增量开发的设计。 3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 前言 Vue CLI 是一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,654
精华内容 7,061
关键字:

vue脚手架3搭建项目

vue 订阅