1、配置node环境
Node.js 安装配置—–菜鸟教程
npm 使用介绍—–菜鸟教程
淘宝镜像
淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npmmirror.com
这样就可以使用 cnpm 命令来安装模块了:
cnpm install [name]
npm 版本需要大于 3.0,如果低于此版本需要升级它:
查看版本
$ npm -v
> 2.3.0
#升级 npm
cnpm install npm -g
#升级或安装 cnpm
npm install cnpm -g
2、安装及创建
2.1 独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用
下载vue.js(2.0版本)
下载vue.js (版本为@3.2.36)
2.2 使用 CDN 方法
2.2.1 vue2版本
- Staticfile CDN(国内):
https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- unpkg:
https://unpkg.com/vue@2.6.14/dist/vue.min.js
。 - cdnjs :
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
代码
script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js">script>
script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">script>
div id="app">
p>{{ message }}p>
div>
script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
script>
2.2.2 vue3版本
- Staticfile CDN(国内) :
https://cdn.staticfile.org/vue/3.0.5/vue.global.js
- unpkg:
https://unpkg.com/vue@next
, 会保持和 npm 发布的最新的版本一致。 - cdnjs :
https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js
script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>
script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script>
script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js">script>
div id="hello-vue" class="demo">
{{ message }}
div>
script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
script>
2.3 NPM 方法
由于 npm 安装速度慢,这里用的是淘宝的镜像及其命令 cnpm
2.3.1 vue2
指定2.0版本安装
这俩比较稳定
cnpm install vue@2.2.2
cnpm install vue@2.7.0
命令行工具
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
全局安装 vue-cli
cnpm install --global vue-cli
创建一个基于 webpack 模板的新项目
vue init webpack my-project
这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob .com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目,安装并运行:
cd my-project
cnpm install
cnpm run dev
成功执行以上命令后访问 http://localhost:8080/
2.3.2 vue3
在用 Vue.js 构建大型应用时推荐使用 cnpm 安装,cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用,然后在命令行中运行以下命令:
最新稳定版
npm init vue@latest
这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。
$ npm init vue@latest
Need to install the following packages:
create-vue@3.6.1
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置,项目名输入 vue3-test1,其他默认回车即可
✔ Project name: … vue服务器托管网3-test1
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? …服务器托管网 No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
Scaffolding project in /Users/vue3-test1...
Done. Now run:
cd vue3-test1
npm install
npm run dev
如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。
在项目被创建后,通过以下步骤安装依赖并启动开发服务器:
$ cd vue3-test1
$ npm install
$ npm run dev
VITE v4.3.4 ready in 543 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
成功执行以上命令后访问 http://localhost:5173/
2.3.2 Vite
Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。
通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目,语法格式如下:
npm init vite-app
创建项目 vue3-test2:
npm init vite-app vue3-test2
$ cd vue3-test2
$ cnpm install
$ cnpm run dev
> vue3-test2@0.0.0 dev /Users/vue3/vue3-test2
> vite
[vite] Optimizable dependencies detected:
vue
Dev server running at:
> Local: http://localhost:3000/
3、注意事项或者小贴士
3.1 Windows系统环境配置权限
检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入”cmd” => 输入命令”path”,输出如下结果:
PATH=C:oraclexeapporacleproduct10.2.0serverbin;C:Windowssystem32;
C:Windows;C:WindowsSystem32Wbem;C:WindowsSystem32WindowsPowerShellv1.0;
c:python32python;C:MinGWbin;C:Program FilesGTK2-Runtimelib;
C:Program FilesMySQLMySQL Server 5.5bin;C:Program Filesnodejs;
C:UsersrgAppDataRoamingnpm
我们可以看到环境变量中已经包含了C:Program Filesnodejs
这个一定要配好的撒,不然后面报错报的你哭爹喊娘
3.2 苹果电脑在安装过程中可能会出现npm权限不够
sudo root
命令执行完输入账号密码,敷一下权限,输密码的时候不会动的,输完回车就行了
3.3 有时候有些报错命令行可能已经告诉你要怎么做了,要看好
类似什么 you could try to: npm install xxx
或者you could try to run: npm install xxx
.要是xxx巨长无比那就回去看看大概率你路径哪儿错了绝对路径换相对路径
好了暂时就这些,想起来再回来补充吧。Byebye~
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机械开合屏与旋转屏是两种常见的展厅显示屏幕类型,它们在设计和功能上有着显著的区别。今天小编将探讨这两种屏幕类型的区别以及它们的优势。 机械开合屏:这种屏幕的设计特点是屏幕可以在一定范围内进行开合,就像一个可以打开和关闭的百叶窗一样。 一:优势 1. 视角更广:…