网站源码在哪看,泰州seo网站推广优化,网站设计专业的公司,一款软件是怎么做出来的1、配置node环境
Node.js 安装配置-----菜鸟教程 npm 使用介绍-----菜鸟教程
淘宝镜像 淘宝 NPM 镜像是一个完整 npmjs.org 镜像#xff0c;你可以用此代替官方版本(只读)#xff0c;同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 可以使用淘宝定制的 cnpm (gzip …1、配置node环境
Node.js 安装配置-----菜鸟教程 npm 使用介绍-----菜鸟教程
淘宝镜像 淘宝 NPM 镜像是一个完整 npmjs.org 镜像你可以用此代替官方版本(只读)同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registryhttps://registry.npmmirror.com这样就可以使用 cnpm 命令来安装模块了
cnpm install [name]npm 版本需要大于 3.0如果低于此版本需要升级它
查看版本
$ npm -v2.3.0#升级 npm
cnpm install npm -g#升级或安装 cnpm
npm install cnpm -g2、安装及创建
2.1 独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用
下载vue.js2.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.jsunpkghttps://unpkg.com/vue2.6.14/dist/vue.min.js。cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
代码
script srchttps://cdn.staticfile.org/vue/2.2.2/vue.min.js/scriptscript srchttps://cdn.staticfile.org/vue/2.7.0/vue.min.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js/scriptdiv idappp{{ message }}/p
/divscript
new Vue({el: #app,data: {message: Hello Vue.js!}
})
/script2.2.2 vue3版本
Staticfile CDN国内 : https://cdn.staticfile.org/vue/3.0.5/vue.global.jsunpkghttps://unpkg.com/vuenext, 会保持和 npm 发布的最新的版本一致。cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js
script srchttps://cdn.staticfile.org/vue/3.0.5/vue.global.js/scriptscript srchttps://cdn.staticfile.org/vue/3.2.36/vue.global.min.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js/scriptdiv idhello-vue classdemo{{ message }}
/divscript
const HelloVueApp {data() {return {message: Hello Vue!!}}
}Vue.createApp(HelloVueApp).mount(#hello-vue)
/script2.3 NPM 方法
由于 npm 安装速度慢这里用的是淘宝的镜像及其命令 cnpm
2.3.1 vue2
指定2.0版本安装 这俩比较稳定
cnpm install vue2.2.2
cnpm install vue2.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 testrunoob.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? Yesvue-cli · Generated my-project.To get started:cd my-projectnpm installnpm run devDocumentation 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 vuelatest这一指令将会安装并执行 create-vue它是 Vue 官方的项目脚手架工具。
$ npm init vuelatest
Need to install the following packages:create-vue3.6.1
Ok to proceed? (y) yVue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置项目名输入 vue3-test1其他默认回车即可
#x2714; Project name: … vue3-test1
#x2714; Add TypeScript? … No / Yes
#x2714; Add JSX Support? … No / Yes
#x2714; Add Vue Router for Single Page Application development? … No / Yes
#x2714; Add Pinia for state management? … No / Yes
#x2714; Add Vitest for Unit Testing? … No / Yes
#x2714; Add an End-to-End Testing Solution? › No
#x2714; Add ESLint for code quality? … No / YesScaffolding project in /Users/vue3-test1...Done. Now run:cd vue3-test1npm installnpm run dev
如果不确定是否要开启某个功能你可以直接按下回车键选择 No。
在项目被创建后通过以下步骤安装依赖并启动开发服务器
$ cd vue3-test1
$ npm install
$ npm run devVITE 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 project-name创建项目 vue3-test2
npm init vite-app vue3-test2$ cd vue3-test2
$ cnpm install
$ cnpm run devvue3-test20.0.0 dev /Users/vue3/vue3-test2vite[vite] Optimizable dependencies detected:
vueDev server running at: Local: http://localhost:3000/3、注意事项或者小贴士
3.1 Windows系统环境配置权限
检测PATH环境变量是否配置了Node.js点击开始》运行》输入cmd 输入命令path输出如下结果
PATHC:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm我们可以看到环境变量中已经包含了C:\Program Files\nodejs\
这个一定要配好的撒不然后面报错报的你哭爹喊娘
3.2 苹果电脑在安装过程中可能会出现npm权限不够
sudo root命令执行完输入账号密码敷一下权限输密码的时候不会动的输完回车就行了
3.3 有时候有些报错命令行可能已经告诉你要怎么做了要看好
类似什么 you could try to: npm install xxx或者you could try to run: npm install xxx.要是xxx巨长无比那就回去看看大概率你路径哪儿错了绝对路径换相对路径
好了暂时就这些想起来再回来补充吧。Byebye~
