首页>>前端>>Vue->怎么安装vue?

怎么安装vue?

时间:2023-12-02 本站 点击:0

Mac 系统配置Vue开发环境

首先安装nodejs

终端输入:brew install nodejs  或者直接官网手动安装。 node -v 查看 nodejs版本

注:网上说使用终端安装会需要nodejs模块安装目录的权限,运行:sudo chmod -R 777 /usr/local/lib/node_modules/

3、安装npm (淘宝镜像)

终端输入:npm install -g cnpm --registry=

4、安装webpack

cnpm install webpack -g

5、安装vue脚手架(自动搭建vue项目框架的工具)

sudo npm install -g vue-cli。静待。

输入vue或者vue list,可vue是否安装成功。

vue离线安装依赖包

离线安装vue环境的方法:1、cmd运行命令“npm config get cache”;2、内网电脑安

装nodejs;3、内网全局安装目录:4、内网命令安装离线依赖包;5、把vue项目复制到内网:6、查看全局命令是否正常即可。

Vue.js安装

在看教程时里面提到

什么是NPM?

NPM手册-W3Cschool

所以NPM类似conda,不过conda是Python的,属于anaconda;NPM是JavaScript的,属于Node.js。

那什么是Node.js?

Node.js教程-W3Cschool

Node.js 安装配置

安装完看环境变量有没配置,没有的话配置一下:

node.js安装后输入“node -v”提示'node' 不是内部或外部命令,也不是可运行的程序的解决方法

安装完node.js,配置好环境后可以开始vue.js安装了!

参考 安装vue.js的方法 可以再安装上 cnpm 和 vue-cli 脚手架构建工具 。

cnpm和vue-cli 都是直接打开cmd用 npm install 方式安装,不需选择路径。

安装cnpm:

安装vue-cli:

所以继续按照官方教程,安装vue

但是,还是不清楚vue该装在哪。。。

先在node.js的路径下安装试试:

应该没有错吧?

迫不及待要开始了~~~

vue-cli脚手架安装及运行

Vue是:构建用户界面的渐进式框架,可以自底向上逐层应用(大概是这个意思?由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。)

(前期刚学时不建议直接安装vue-cli脚手架,可以直接通过script/script引入,如:script src=""/script 然后直接用就行了)

1.首先Windows+R 打开cmd;输入npm -v 和node -v 检测是否安装了npm和node.js,没安装先去安装node.js(npm是随node.js一起安装的包管理工具,就不用安装了)附上node.js安装地址:

2.然后还需要淘宝镜像安装cnpm和webpack支撑(有时候安装依赖特别慢 就会用到cnpm)

淘宝镜像安装cnpm命令:

安装之后 执行cnpm -v,如果出现相应的版本号就是安装成功

webpack安装命令:

安装之后 执行webpack -v,它会问你:

直接回车就可以,然后再执行webpack -v,如果出现相应的版本号就是安装成功

3.最后就是安装vue-cli脚手架了

vue-cli脚手架安装命令:

安装之后 执行 vue -V ,如果出现相应的版本号就是安装成功

4.用vue-cli创建一个基于webpack的新项目并运行

首先可以在桌面新建一个文件夹,如:Vue

然后执行cd Vue 进入文件夹,然后输入以下命令新建项目,回车

然后根据提示一路回车,这时文件夹下就会有很多相关文件了

最后用cnpm安装依赖:

最后的最后 就是运行项目啦 输入以下命令:

或者以下命令也可以:

如果成功的话,一般就是提醒你可以在浏览器地址栏输入以下地址就能正常访问了

至此,应该就可以正常访问一个新建的项目了,接下来的就是在新项目中通过组件、事件、指令等等丰富项目。

本文根据vue.js官方文档学习总结。附上官方文档:

【vue入门】vue安装方式

安装vue的方式有很多种:

        vue官网地址:    

    后续通过webpack和cli的使用,可以使用这种方式

Vue3.x 超详细安装教程

meta charset="utf-8"

npm 或 yarn 安装

查看版本(是否安装成功):

进入demo目录: cd G:\demo\

创建 my-project 项目: vue create my-project

选择自己所要集成的配置(格键是选中与取消,A键是全选,回车确定)

这里我的选择如下:

配置项:

这里我选择: 3.x

安装的 vue-cli 将会是基于 vue3.x 版本

如果在项目中想要保持使用 TypeScript 的 class 风格的话,建议大家选择y。

这里我选择: y

这里我选择: y

这里我选择: y

Sass/SCSS分两种:

这里我选择: Sass/SCSS(with node-sass)

这里我选择: ESLint with error prevention only

这里我选择: Lint on save

这里我选择: In dedicated config files

这里我选择: N

cd my-project ( 进入项目根目录 )

yarn serve ( 启动项目 )

现在的目录是 Vue3.x 的 cli 看上去简洁多了,去掉了 Vue2.x 中 build 和 config 等目录

在项目的根目录下新建 vue.config.js 文件( 是根目录,不是src目录 )


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/9400.html