一、Vue开发所需要的环境
1. nodejs:javaScript运行环境
2. npm:nodejs下的包管理器(是国外的,在国内使用会很慢),可以使用国内的淘宝npm镜像。
3. webpack: 把无法直接在浏览器中使用的语言(如es6,sass)编译成浏览器支持的形式,资源的合并、压缩混淆。
4. vue-cli:直接构建vue项目。
二、环境搭建步骤
  1. nodejs安装
    直接在nodejs官网下载安装,安装完之后打开cmd输入node -v可以查看node版本,显示node版本说明已经安装成功。
    node版本查看
  2. npm版本
    安装nodejs成功之后输入npm -v就可以查看npm版本。
    npm版本查看
  3. 安装cnpm
    输入指令npm install -g cnpm –registry=http://registry.npm.taobao.org,然后回车进行安装。安装完之后输入cnpm -v查看版本信息。
    cnpm安装
  4. 安装vue-cli
    输入指令npm install -g vue-cli进行全局安装vue-cli。
    vue-cli
  5. 使用vue-cli构建一个vue项目
       在终端输入进入项目的存放地址,然后输入输入指令vue init webpack firstvuedemo(firstvuedemo是项目名称,最好小写字母,首字母小写后面有大写字母会报错)初始化项目,然后一直回车,但是如果提示Should we run npm install for you after the project has been created? (recommended) (Use arrow keys),则选择No, I will handle that myself,因为这里是使用npm install,在国内npm会很慢,所以推荐选择自己处理,构建完成之后再用cnpm install来安装。显示下面的提示则表示成功。
    vue构建
    目录结构:
    目录结构
  6. 安装项目依赖
    进入项目路径,输入指令cnpm install安装依赖。安装完成之后项目目录结构会多出一个node_modules文件夹,这里存放的是项目需要的依赖包资源。
    安装依赖
    依赖包资源
  7. 运行项目
    输入指令npm run dev就可以运行整个项目了。在浏览器输入返回的地址就可以查看了。
    运行
    运行结果
  8. vue开发代码编辑器
    本人使用vscode进行开发,vscode安装以及所需要插件请看下一篇文章。
Logo

前往低代码交流专区

更多推荐