vue-cli的安装

万里奔腾 万里奔腾     2022-10-07     361

关键词:

这座网址:https://www.cnblogs.com/jn1223/p/6656956.html

 

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node

1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都比较好)

2、在目标文件夹下打开终端

3、执行cnpm install vue-cli -g 全局安装

 

 

运行vue查看安装是否成功

 

 

4、运行vue init webpack(注:模板名称) sell2(注:项目名称)

 

 

5、进入项目文件夹下执行 cnpm install    来安装下载到模板中的package.json中的依赖,安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件

 

 

6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存,所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件

 

 

注:webstorm一打开就卡死了,没办法操作文件夹这种情况的解决方法为,首先在文件夹形式下打开删除node-modules文件夹,然后进行阻止检索的方法,然后在重新cnpm install就好*(这种方法需要安装完依赖项先运行一次然后删除node_modules子文件,webstorm打开项目,禁止检索node_ module文件夹,然后在删除该文件夹,重新安装即可)

 

7、运行项目执行 npm run dev  (注:此时不能用cnpm来运行,必须是npm)

8、将需要的资源放进项目

 

 

9、我们需要用到路由功能  所以需要安装vue-router

安装方法:vnpm install vuve-router --save

10、在build/devs-erver.js下编写自定义变量和路由功能

 

 

这样在运行项目下就可以得到自己想要的json数据,如下:

 

 

 

这样路由就配置成功,并且得到了自己想要的数据

11、在写代码之前现在html文件下引入初始化样式(保持样式的统一和美观)

 

 

12、调用组件的方式

 

 

13、需要用到sass(个人需求),所以安装sass-loader

安装方法:cnpm install sass-loader --save-dev

Pakcage.json文件下回生成sass-loader的版本信息

由于sass-loader是依赖于node-sass所以我们还要安装node-sass

安装方法:cnpm install node-sass --save-dev

此时可以在模块中定义scss来书写scss代码,还可以新建*.scss文件,并且可以利用

@import  “../路径”; 来调用其他的scss文件和已经定义好的scss方法,

利用@include 方法名(参数); 来调用

14、需要用到ajax请求,利用vue-resource

安装方法:cnpm install vue-resource--save 安装完成会在package.json中生成版本信息

使用方法如下:

 

关于vue-cli的安装

(一):*安装vue-cli参考: https://cn.vuejs.org/v2/guide/installation.html https://github.com/vuejs/vue-cli全局安装: npminstallvue-cli-g或者npminstall-g@vue/cli-initcd到某文件夹下初始化: cd./vue_app vueinitwebpackproject_one 查看详情

介绍vue-cli

一、安装vue-cli安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm-v检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本为3.10.10... 查看详情

vue-cli的使用(代码片段)

1、安装nodehttps://nodejs.org/en/download/2、webpack安装【我选全局安装】全局安装npminstall--globalwebpack本地安装npminstall--save-devwebpack3、vue-cli的安装【我选全局安装】全局安装npminstall--globalvue-cli本地安装npminstall--save-devvue-cli4、 查看详情

vue-cli的安装及版本查看/更新(代码片段)

vue-cli的安装及版本查看更新vue-cli安装npminstallvue-cli-gvue-cli的版本查看vue-Vvue-cli的3.0+以后使用的不是vue-cli了,如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的npminstall@vue/cli-g如果原来已经安... 查看详情

vue-cli搭建(代码片段)

一、安装vue-cli安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm-v  检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本... 查看详情

vue-cli创建自己的项目

...vue项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、安装node.js首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。只是这样安装的node是固定版本的,如果需要多版本的node,可以使用nvm安装http://bl 查看详情

vue-cli安装

vue-cli是vue官方提供的一个脚手架工具,用于初始化一个Vue项目; vue-cli的优势:1、成熟的vue项目架构设计,而且会跟随vue版本的更迭而更新; 2、提供了一套本地测试服务器,而且是一个热加载的服务器; 3、提供了自... 查看详情

vue-cli脚手架安装

...套vue的结构,包含基础的依赖库,只需要npminstall就可以安装,步骤:1.前提:安装了npm,淘宝NPM镜像等 2.检测是否已经安装vue-cli,执行以下命令  vue--version    若执行不成功,在进行:  cnpminstall-gvue-cli   ... 查看详情

vue-cli安装

注:安装sass的前提是安装Ruby注:安装vue的前提是安装node注:安装node的前提是安装Python项目模板Simple  个人感觉没用WebpackWebpack-simpleBrowserifyBrowserify-simple  1、Npminstallvue-cli-g 安装vue命令环境安装OK?vue-version2、... 查看详情

vue-cli的安装使用

安装npmnpm命令安装vue-clinpminstallvue-cli-g vueinit命令来初始化项目vueinit<template-name><project-name><template-name>:表示模板名称,vue-cli官方为我们提供了5种模板,  webpack-一个全面的webpack+vue-loader的模板,功能包括热... 查看详情

安装/运行vue-cli出现的问题

安装vue-cli后出现这个问题:无法加载文件C:UsersAdministratorAppDataRoamingpmvue.ps1在powershell中输入一下命令:set-executionpolicyremotesigned出现的问题:npmERR!UnexpectedendofJSONinputwhileparsingnear...创建vuex项目出现问题,执行以下命令:n 查看详情

使用nodejs安装vue-cli

TIP:win10下安装,使用管理员身份进行,否则会有权限限制。1,安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli。(npminstall--globalvue-cli)----想安装速度快点,可以使用淘宝镜... 查看详情

如何使用 vue-cli 安装其他 vue 版本不是最新的

】如何使用vue-cli安装其他vue版本不是最新的【英文标题】:howtousevue-cliinstalltheothervueversionnotlatest【发布时间】:2018-10-1201:44:36【问题描述】:我想用vue-cli初始化我的vue项目,但是vue和wepack版本都是最新的,这不是我想要的,老... 查看详情

安装了vue-cli,为啥终端命令vue-cli

参考技术A指定什么路径啊,你可以解压放到VUE的素材安装目录,文件夹的名字都是一样的,他会直接放到相应的素材分类里去,但不建议这样,因为ISO格式的直接加载到虚拟光驱里就可以在VUE中调用了,可以随用随加载,没必... 查看详情

vue-cli中安装方法

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都... 查看详情

笔记npm安装vue-cli

...于vue的认识有了更深一步的认识,但是其脚手架vue-cli的安装流程还是有点懵,于是今天重新试了一遍加深认识网上参考过一些有用的教程在这里分享一下:npm全局安装完vue-cli命令行输入vue不是内部命令的解决方法 http://www.cn... 查看详情

vue-cli新手总结

...到的问题以及解决方案,还要学习的地方有很多。vue-cli安装下载网上有很多教程,推荐看https://www.jianshu.com/p/5ba253651c3b,有很详细的项目搭建,但对于新手而言,有些地方需要自己摸索才能明白,对于,将我的总结心得分享一下... 查看详情

vue-cli的安装

1.全局安装vue-clicnpminstallvue-cli-g2.查看是否安装成功vue-V3.初始化项目$vueinit<template-name><project-name>4.根据提示,先进入项目目录,再进行安装5.跑一个试试看npmrundev6.如果提示这样的报错,更新一下npmnpmi-gnpm顺便更新一下cnp... 查看详情