游戏开发团队,seo建站平台哪家好,wordpress附件类型,做网站如何推广买量参考文献 vuevscodenodejs 开发环境搭建 - Desperador - 博客园
nodejs 指定全局安装路径和缓存路径 - Curedfisher - 博客园
安装配置nodejs并创建Vue项目 vscode下载地址#xff1a;
Documentation for Visual Studio Code nodejs安装配置
1.下载
地址#xff1a; … 参考文献 vuevscodenodejs 开发环境搭建 - Desperador - 博客园
nodejs 指定全局安装路径和缓存路径 - Curedfisher - 博客园
安装配置nodejs并创建Vue项目 vscode下载地址
Documentation for Visual Studio Code nodejs安装配置
1.下载
地址 下载 | Node.js
Node.js 官方网站下载Node.js 2.默认安装 安装完成后执行npm -v 出现版本号则表示安装成功。
打开cmd分别输入node –v和 npm –v 都有相应的版本输出说明安装成功。
3.配置不配置会非常混乱
在node安装目录下新建两个文件夹node_global和node_cache配置npm全局模块的存放路径以及cache的存放路径执行如下命令
npm config set prefix D:\Program Files\nodejs\node_global
npm config set prefix D:\Program Files\nodejs\node_cache (错误) npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache” npm config set prefix C:\workspace_software\vscode\nodejs\node_global
npm config set cache C:\workspace_software\vscode\nodejs\node_cache 配置环境变量增加变量
NODE_PATH D:\Program Files\nodejs\node_global\node_modules
NODEJS_PATH D:\Program Files\nodejs
PATH 追加%NODEJS_PATH%\;%NODEJS_PATH%\node_global\
在cmd命令下执行 npm install webpack -g 安装成功后可以看到webpack已经安装到自己设置的node_global目录下。 国内直接使用npm 的官方镜像是非常慢的网上很多使用cnpm来代替npm的方法但是这样很多时候需要使用cnpm命令。我们可以设置把npm的镜像源设置为淘宝的以后就可以直接使用npm命令了其实本质上是一样的。
安装cnpm执行如下命令
npm install -g cnpm --registryhttps://registry.npm.taobao.org
# 配置镜像站
npm config set registryhttp://registry.npm.taobao.org
# 检查一下镜像站是否正常
npm config get registry
然后就可以用 cnpm install express -g 进行拉包了和npm一样。 npm用国外的比较慢 安装js格式校验插件eslint
cnpm install eslint -g 和npm一样。
然后就可以用 cnpm install express -g 进行拉包了和npm一样。 全局安装vue-cli工具
cnpm install webpack -g
cnpm install vue-cli –g 三、创建Vue项目
1、使用vue初始化基于webpack的新项目vue init webpack vue_demo初始化过程中会有一些选项可以按照自己的需求进行选择。
2、创建完成后进入Vue项目目录cd vue_demo
3、执行命令npm install cnpm install
4、启动npm run dev cnpm run dev
5、浏览器中访问: http://localhost:8080/ 可以看到效果。 VSCode安装配置
1.下载
地址Download Visual Studio Code - Mac, Linux, Windows
2.默认安装 zip解压即可使用
3.插件安装
Auto Close TagAuto Rename TagBeautifyChineseCSS peekDocument ThisESlintfilesizeGitlens-Git superchargedHTML CSS supportHTML snippetsJava Server pagesLanguage Support for JavaLive serveropen in browserPath AutocompletePath IntellisensePostCSS syntaxpostcss-sugarss-languageVeturVS Code CSS Commentsvscode-iconsVue 2 SnippetsVueHelper
3.配置 修改配置如下
{
css.validate: false,
// files.associations: {
// *.css: postcss
// },
emmet.includeLanguages: {
vue-html: html,
javascript: javascriptreact,
postcss: css
},
git.path:E:/Program Files/Git/bin/git.exe,
git.autoRepositoryDetection: false,
workbench.iconTheme: vscode-icons,
//自动补齐文件路径时带入扩展名
path-autocomplete.extensionOnImport: true,
// 每次保存文件ctrls时eslint插件会自动对当前文件进行eslint语法修正
eslint.validate: [
javascript,
javascriptreact,
html,
{
language: vue,
autoFix: true
}
],
eslint.options: {
plugins: [
html
]
},
//为了符合eslint的两个空格间隔原则
editor.tabSize: 2,
// 启用/禁用 HTML 标记的自动关闭。
html.autoClosingTags: true,
// 启用后按下 TAB 键将展开 Emmet 缩写。
emmet.triggerExpansionOnTab: true,
// 以像素为单位控制字号。
editor.fontSize: 16,
[postcss]: {},
git.enableSmartCommit: true,
liveServer.settings.host: 172.30.201.16,
liveServer.settings.donotShowInfoMsg: true,
gitlens.advanced.messages: {
suppressShowKeyBindingsNotice: true
},
explorer.confirmDelete: false,
vsicons.dontShowNewVersionMessage: true
}
{
css.validate: false,
// files.associations: {
// *.css: postcss
// },
emmet.includeLanguages: {
vue-html: html,
javascript: javascriptreact,
postcss: css
},git.path:C:/Program Files/Git/bin/git.exe,
git.autoRepositoryDetection: false,
workbench.iconTheme: vscode-icons,
//自动补齐文件路径时带入扩展名
path-autocomplete.extensionOnImport: true,
// 每次保存文件ctrls时eslint插件会自动对当前文件进行eslint语法修正
eslint.validate: [
javascript,
javascriptreact,
html,
{
language: vue,
autoFix: true
}
],eslint.options: {
plugins: [
html
]},//为了符合eslint的两个空格间隔原则
editor.tabSize: 2,
// 启用/禁用 HTML 标记的自动关闭。
html.autoClosingTags: true,
// 启用后按下 TAB 键将展开 Emmet 缩写。
emmet.triggerExpansionOnTab: true,
// 以像素为单位控制字号。
editor.fontSize: 16,
[postcss]: {},
git.enableSmartCommit: true,
//liveServer.settings.host: 172.30.201.16,
//liveServer.settings.donotShowInfoMsg: true,
gitlens.advanced.messages: {
suppressShowKeyBindingsNotice: true
},explorer.confirmDelete: false,
vsicons.dontShowNewVersionMessage: true
}
vue安装和初始化
1.安装
执行命令cnpm install -g vue-cli
2.搭建vue项目并初始化
执行命令vue init webpack my-project根据提示输入内容使用vscode打开项目右键项目在终端中打开移动到项目根目录
cd ..
安装依赖
cnpm install
启动项目
cnpm run dev 结果如下 参考文献
node安装后的设置(node_global和node_cache) - windows_scorpio_meng的博客-CSDN博客_node_global 之前安装node后就进行了demo的测试和学习从网上拉取包的有时候不知道放在什么地方了c盘也有当前项目目录也有挺乱的。
使用npm安装模块分为本地安装和全局安装。
本地安装npm install express 会安装到当前项目
全局安装npm install express -g 会安装到指定的目录(node_global)
另外如果没有设置全局目录node_global那么全局安装的文件将会保存到 C:\Users\hades\AppData\Roaming\npm (hases是自己设置的计算机名字)
所以安装好node后要设置一下node_global和node_cache(node缓存文件夹)
1在node安装目录创建node_global和node_cache文件夹 2设置环境变量
用户变量设置将用户变量中 PATH 的值改成 D:\Program Files\nodejs\node_global没有PATH可以直接添加。
系统变量设置添加变量 NODE_PATH 值为D:\Program Files\nodejs\node_modules 3打开cmd执行
npm config set prefix D:\Program Files\nodejs\node_global
npm config set cache D:\Program Files\nodejs\node_cache 4执行npm install express -g 后查看node_global 文件夹如果执行命令出错请以管理员身份运行cmd。 5有时候用npm拉取包可能会很慢可以用淘宝npm镜像代替npm进行拉包就像github和gitee
执行$ npm install -g cnpm --registryhttps://registry.npm.taobao.org
然后就可以用 cnpm install express -g 进行拉包了和npm一样。 ———————————————— 版权声明本文为CSDN博主「scorpio_meng」的原创文章遵循CC 4.0 BY-SA版权协议转载请附上原文出处链接及本声明。 原文链接https://blog.csdn.net/scorpio_meng/article/details/83314675 分类: vue
标签: vue, no
