宽禁带半导体 LeetCode Java包装类 人工智能 Transformer xcode directory 3d Amaze UI 建造师报考条件 vue响应式布局 android开发项目 当前时间减一天 python抛异常 java课程 adobe清理工具 din字体 神剪辑教程 字幕提取 tampermonkey 大势至usb监控 pr调整图层 汉仪文黑 文件批量更名 联盟练级路线 刷机精灵pc版 无线网密码修改 田字格字体 mac办公软件 删除mysql服务 php文件用什么打开 上传图片 currentstyle mmc无法创建管理单元 劲舞团辅助 qq打招呼怎么关闭 spring详解 cad打散命令 怎么调整照片像素 微信石头剪刀布
当前位置: 首页 > 学习教程  > 编程语言

Vue 入门环境搭建

2020/10/16 17:49:44 文章标签:

公众号:代码集中营 每周分享技术文章、优质软件资源第一步:安装node.js 下载链接 node简介 Node.js是一个Javascript运行环境。实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器,他会改变服务器应该如何工作的概…

公众号:代码集中营
每周分享技术文章、优质软件资源

第一步:安装node.js 下载链接

node简介
Node.js是一个Javascript运行环境。实际上它是对Chrome V8引擎进行了封装。Node 是一个服务器端 JavaScript 解释器,他会改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码。那直白的说,Node.js就是服务器程序,是用来做后端的技术,不能直接用于前端开发。但是干前端的学会了会更加的牛逼,对编程的思想和代码效率有很大的提升。Node大量使用时间驱动实现异步开发,能够高效的打通前后端,所以vue也是采用他作为配置环境,便于大型项目的开发。

如何查看是否安装成功 打开终端输入 node -v
image.png

设置淘宝源:通过配置镜像,便于下载npm其他东西,非必须配置,打开终端输入一下命令
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site=[https://npm](https://npm).[taobao.org/mirrors/node-sass/](http://taobao.org/mirrors/node-sass/)

第二步:安装vue.js

打开cmd命令框,输入 npm install vue
image.png

第三步:安装vue-cli工具

Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用,打开cmd命令框,输入

sudo  npm install -g @vue/cli

sudo 是管理员权限,不需要可以不加

第四步 :安装webpack

webpack 是处理模块管理、打包, 打开cmd命令框,输入

npm install webpack -g

第五步:创建vue的demo项目

  1. cd到要创建的文件夹:cd /Users/apple/Desktop/VueDemo
  2. 在VueDemo文件夹内,创建一个叫helloword的工程:vue create helloword
  3. 之后会弹出一些选择项,如果不知道选择哪个,按照我截图的选择即可
  4. 之后VueDemo文件夹内就会出现一个helloword 的demo工程
    image.png
    image.png

第六步:运行demo项目

  1. cd 到helloword工程目录下
  2. npm install 第一次运行工程需要执行,目的是下载项目中用到的node_modules库
  3. npm run serve 启动服务
  4. 打开浏览器 http://localhost:8081/ 就可以看到我们本地搭建的项目
    image.png

image.png

###npm指令记录:

//安装vant 插件
npm install vant --save

//启动服务器
npm run serve

//打包成产品的时候 需要用到的指令
npm run build

##参考文献

1. 推荐安装 Visual Studio Code 是Vue编辑器,便于开发使用 下载地址

2. 官方教程 Vue CLI


本文链接:
http://www.dtmao.cc/news_show_300203.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?