使用@vue/cli初始化项目

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

 npm uninstall vue-cli -g

卸载它。附上vue-cli官方文档地址

首先检查你的node版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),命令为

node --version

1.安装vue-cli,-g表示全局安装,这样你才可以直接在命令行使用该指令,否则不行

npm install -g @vue/cli

2.使用vue-cli初始化一个项目文件

vue create hello-world

hello-world是你的文件名,自己定义,cli3.x版本和2.x版本初始化项目的命令不一样,2.x版本的命令为

vue init <template-name> <project-name>
init:表示我要用vue-cli来初始化项目 <template-name>:表示模板名称,vue-cli官方为我们提供了5种模板, webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。 webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。 browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。 browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。 simple-一个最简单的单页应用模板。 <project-name>:标识项目名称,这个你可以根据自己的项目来起名字。

拉取 2.x 模板 (旧版本)

Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected].x` 相同
vue init webpack my-project

 

单独配置所需选项

Babel用来进行es6的转码

Router是集成了vue-router

Vuex集成Vuex

CSS Pre-processors是css预处理sass/less/stuyls

Linter/Formatter 是格式化

Unit Testing 是单元测试

原文地址:https://www.cnblogs.com/zhaozhaoli/p/10017415.html

时间: 2024-10-27 11:49:11

使用@vue/cli初始化项目的相关文章

使用vue cli开发项目中遇到的坑

一.部署文件 使用vue cli 开发项目,执行npm run build命令生成dist静态文件,将dist文件包放到服务器中即可. 刚接触webpack,不知道怎么部署前端文件,原以为需要将app文件上传,在 inux上安装node,以及npm install 一系列的包,捣鼓了很久,发现只需要执行 npm run build 将源码打包成一个静态文        文件即可,上传静态文件dist,将 controller指向index.html. 二.跨域问题 实行前后端分离,使用vue i

VUE学习笔记之vue cli 构建项目

一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功 因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,要意的是npm的版本最好是3.x.x以上,以免对后续产生影响. 2.安装淘宝镜像 npm install -g cnpm --registry= https://regis

vue cli搭建项目及文件引入

cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 2.cnpm i -g vue-cli  //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用. 3.vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,proje

vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.env.js 我们需要做配置的就是第一个和第三个. 其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件,那么打开dev.en.js,开发环境.原本代码如下: 'use strict' const merge = require('webpack-merge') const prodEnv

vue + element + 初始化项目

前提:已经安装了好了npm 和 vue脚手架 注意: 进入想要放置项目的目录下. 1.vue init webpack sun-vue-element 2.根据提示输入 y/n 3.npm run dev,可运行该项目. 原文地址:https://www.cnblogs.com/huaisun/p/10626471.html

vue脚手架初始化项目名称规范

1.不能出现中文2.不能出现特殊符号3.不能出现大写字母 原文地址:https://blog.51cto.com/13550695/2456132

利用node、express初始化项目

前端做整站是开发,例如:前端是用了vue创建初始化项目,后端我们不会php.java等,我们只能用node去创建去做后端代码,本文就给大家讲解最基础的从零开始创建一个项目的后端环境. 一般来说前后端代码肯定是分离的,但是也有不分离的情况例如jsp代码,本文讲解前后端分离的情况. 前后端项目分离,这样后端的项目创建就不需要在前端的代码里,相当于是两个独立的工程. 一:首先全局安装Node的express 框架 当然安装过的就不需要在执行这个步骤了. cnpm i -g express-genera

vue/cli 3.0 脚手架【进阶】

安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 配置 flexible 安装 lib-flexible  

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g