vue-cli起项目步骤
1.全局安装 vue-cli
老版本:npm install -g vue-cli (npm uninstall vue-cli -g 卸载)
新版本:npm install -g @vue/cli
安装淘宝cnpm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.创建一个基于webpack模板的新项目
老版本:vue init webpack my-blog
新版本:vue create ele-app
3.一路No
4.cd my-blog
5.npm run dev(npm run serve)
安装axios
npm install --save axios
安装vuex
npm install vuex --save
安装路由
npm install vue-router --save
安装better-scroll(移动端滚动)
npm install better-scroll --save / cnpm i -S better-scroll
安装element-UI
npm i element-ui -S
安装mint-UI
npm install mint-ui -S
一、 安装 node.js
安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。
二、安装webpack
npm install webpack -g
安装完成后使用webpack -v,如果出现相应的版本号,则说明安装成功。
三、安装 vue-cli
npm install -g vue-cli
安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。
如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本
四、使用vue-cli来构建项目
1、在硬盘中找一个放项目的文件夹
2、在文件夹下打开命令盘,输入命令
Vue-Project是我们自己设置的项目名称,项目名称不能用中文
vue init webpack Vue-Project
3、进入项目工程目录
4、安装项目所需依赖 npm install
5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
npm install vue-router vue-resource --save
创建完成的项目目录,如下图
各个目录的作用
最后一步启动项目
npm run dev
启动成功,打开浏览器8080窗口,页面如图所示
vue-cli起项目步骤的更多相关文章
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
- Vue -cli 入门 --项目搭建(一)
一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...
- vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
- vue cli搭建项目
1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...
- 使用vscode开发vue cli 3项目,配置eslint以及prettier
初始化项目时选择eslint-config-standard作为代码检测规范,vscode安装ESLint和Prettier - Code formatter两个插件,并进行如下配置 { " ...
- vue/cli创建项目过程
①vue create demo vue版本:3.9.3,node版本:12.8.0 ②Manually select features ③Bab ...
随机推荐
- bash 小技巧
CTRL-R (reverse find),按下之后敲几个字母就能在最近打过的命令里搜索.
- CSS权值比较(读书笔记)
1.继承0.1 标签1 类选择符10 ID选择符100 2.层叠:后面的样式会覆盖前面的样式. 3.内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式(外 ...
- 遗传算法MATLAB实现(1):工具箱下载及安装
到官网下载谢菲尔德大学的GA工具箱:http://codem.group.shef.ac.uk/index.php/ga-toolbox(其实蛮不懂为什么有人把这个传到某个网上还需要积分才能下载,人家 ...
- Directx11教程(61) tessellation学习(3)
原文:Directx11教程(61) tessellation学习(3) 现在我们看看在不同tess factor的情况下,三角形是如何细分的?(这儿三条边和内部tess factor值是 ...
- 洛谷2591BZOJ2298 problem a题解
题目连接 bz链接 我们发现,如果一个人有ai个分数比他高的人,有bi个分数比他低的人 那么按照分数排序后,区间[ai+1,n-bi]中的人分数便是相同的 这样就将一个人转化为一个区间 也许有很多人的 ...
- 洛谷 P1505 [国家集训队]旅游 树链剖分
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例: 输出样例: 说明 思路 AC代码 总结 题面 题目链接 P1505 [国家集训队]旅游 题目描述 Ray 乐 ...
- osgi实战学习之路:4.Bundle
</pre></h1><h1 style="margin:0 0 0 40px; border:none; padding:0px"><p ...
- Oracle基础学习4--Oracle权限传递
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wang379275614/article/details/32215325 以下将用一个实例来解说: ...
- APICloud原生APP中ajax需要用api.ajax
报错截屏: APICloud原生APP中ajax请求需要用api.ajax(api对象的ajax方法来替代),否则会将引起请求失败. APICloud api.ajax
- oracle函数 power(x,y)
[功能]返回x的y次幂 [参数]x,y 数字型表达式 [返回]数字 [示例] select power(2.5,2),power(1.5,0),power(20,-1) from dual; 返回:6 ...