2025年{ {name}} 很帅

编程汇总 • 2025-01-16 17:01 • 阅读 3

迫于无奈还得学下前端的东西，虽然本人学的是后端，但是很早也就听过了Vue很火，所以这里花一天时间学一些基础的Vue知识，至少保证能看懂吧!

1 Node和NPM

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有，所以我们先安装node及NPM工具。

Node下载地址 Node下载地址

下载完后下一步下一步地安装即可，安装完成Node自带了NPM了

下载完后看看是否有npm，控制台查看下npm版本

C:\Users\12706>npm -v

6.4.1

npm默认的仓库地址是在国外网站，速度较慢，建议设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm
我们首先安装nrm，这里-g代表全局安装，然后查看下仓库列表，*表示当前使用的

C:\Users\12706>npm install nrm -g

npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

C:\Users\12706\AppData\Roaming\npm\nrm -> C:\Users\12706\AppData\Roaming\npm\node_modules\nrm\cli.js

+ nrm@1.1.0

added 324 packages from 564 contributors in 22.949s



C:\Users\12706>nrm ls



* npm ---- https://registry.npmjs.org/

  cnpm --- http://r.cnpmjs.org/

  taobao - https://registry.npm.taobao.org/

  nj ----- https://registry.nodejitsu.com/

  npmMirror  https://skimdb.npmjs.com/registry/

  edunpm - http://registry.enpmjs.org/

注意到npm当前使用的是国外的是国外的仓库地址，速度会比较慢，我们切换到淘宝镜像，顺便测试下速度

C:\Users\12706>nrm use taobao

                         verb config Skipping project config: C:\Users\12706/.npmrc. (matches userconfig)



   Registry has been set to: https://registry.npm.taobao.org/





C:\Users\12706>nrm test npm



  npm ---- 1211ms

注意：安装完后重启下电脑

2 Vue项目创建与安装

接下来就准备使用Vue了，首先创建工程，这里使用的开发工具是idea，由于第一次使用，所以全部进行了截图。

使用npm安装Vue

直接使用idea的中端来安装

Microsoft Windows [版本 10.0.10586]

(c) 2015 Microsoft Corporation。保留所有权利。



D:\my-vue>cd vue-demo



D:\my-vue\vue-demo>npm init -y   #初始化  此时项目会多个package.json文件夹

Wrote to D:\my-vue\vue-demo\package.json:



{

  "name": "vue-demo",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}







D:\my-vue\vue-demo>npm install vue --save   #只针对该应用进行安装

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN vue-demo@1.0.0 No description

npm WARN vue-demo@1.0.0 No repository field.



+ vue@2.6.10

added 1 package from 1 contributor and audited 1 package in 2.624s

found 0 vulnerabilities

注意：

npm init -y   #初始化  此时项目会多个package.json文件夹

npm install vue --save   #只针对该应用进行安装  此时会多个node_modules文件夹，下面是Vue的源代码这些

最终就是下面这个样子







    

    hello vue







{
{name}} 很帅

2025年{ {name}} 很帅

1 Node和NPM

2 Vue项目创建与安装

相关推荐