网站做三方登陆需要注册公司不,wordpress支持国内视频的编辑器,桂林学校网站制作,网站是如何建立的呢目录 一、安装node
二、安装NPM
1、本地安装和全局安装
2、通过Node.js官方安装程序安装
3、通过Homebrew安装
三、NPM常用命令
1、查看模块的版本号
2、安装指定版本
3、卸载模块
4、更新模块
5、查看模块信息
6、查看模块地址
7、更新命令
8、卸载NPM
四、安装…目录 一、安装node
二、安装NPM
1、本地安装和全局安装
2、通过Node.js官方安装程序安装
3、通过Homebrew安装
三、NPM常用命令
1、查看模块的版本号
2、安装指定版本
3、卸载模块
4、更新模块
5、查看模块信息
6、查看模块地址
7、更新命令
8、卸载NPM
四、安装Vue
五、初始化脚手架CLI
六、创建vue项目
七、项目一些配置
1、项目文件目录
2、项目运行起来浏览器自动打开
3、eslint校验工具的关闭:
4、安装less 、less-loader
5、安装vue-router 一、安装node
NPM是一个极为重要的Node.js软件包管理器它允许用户轻松安装、更新、卸载任何需要的Node.js软件包。
Node.jsNPM是随Node.js一起发布的如果没有安装Node.js可以在Node.js官网下载。
方式一下载安装包pkg推荐
安装完成后可以运行以下命令检查是否成功安装了这些软件 $ node -v 方式二brew 容易失败可能需要科学上网会快些
Homebrew它是一个Mac OS X下的包管理器可以在Homebrew官网上找到详细的安装说明。
brew install node
如果顺利地输出了版本信息则表明这些软件已经成功安装。
二、安装NPM
1、本地安装和全局安装
npm 的包安装分为本地安装local全局安装global两种从命令行来看差别只是有没有-g而已比如 npm install 模块名 # 本地安装 npm install 模块名 -g # 全局安装 // install可以缩写为i 本地安装 将安装包放在 ./node_modules 下运行 npm 命令时所在的目录如果没有 node_modules 目录会在当前执行npm 命令的目录下生成node_modules 目录 可以通过 require() 来引入本地安装的包 全局安装 将安装包放在 /usr/local 下或者你 node 的安装目录 可以直接在命令行里使用 2、通过Node.js官方安装程序安装
方式一
可以在Node.js官网下载Mac的.pkg文件并按照提示安装。安装完成后NPM已经随Node.js一起安装了。
3、通过Homebrew安装
可以使用以下命令在终端中安装NPM
brew install node
三、NPM常用命令
1、查看模块的版本号 npm 模块名 grunt 2、安装指定版本
npm install 默认安装最新版本如果想要安装指定版本可以在库名称后加 版本号 npm install 模块名latest npm install 模块名0.1.1 npm install 模块名0.1.0 0.2.0 3、卸载模块
我们可以使用以下命令来卸载 Node.js 模块 npm uninstall 模块名 建议直接删除node-modules文件夹
4、更新模块 npm update 模块名 5、查看模块信息 npm list 模块名 6、查看模块地址 npm view 模块名 repository.url 很多包的地址都是托管在github上
7、更新命令
为了获得最新的软件包并修复可能存在的错误和漏洞需要定期更新npm。以下是更新npm的三种方法 1、通过npm自身更新 可以使用以下命令更新npm npm install npm -g 2、通过Homebrew更新 可以使用以下命令更新npm brew update brew upgrade node 8、卸载NPM $ brew uninstall node $ npm uninstall npm -g $ sudo rm -rf /usr/local/{lib/node{,/.npm,_modules},bin,share/man}/{npm*,node*,man1/node*} 四、安装Vue
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。 npm install vue^3 五、初始化脚手架CLI
Vue 提供了一个官方的 CLI为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验以及生产环境可用的构建版本。更多详情可查阅 Vue CLI npm install -g vue/cli 六、创建vue项目 vue create my-project 七、项目一些配置
1、项目文件目录 public:放置一些静态资源图片需要注意放在public文件中的静态资源,webpack进行打包时会原封不动的打包到dist文件夹中 src(源代码文件夹) assets一般放置静态资源一般放置多个组件公用的静态资源需要注意放置在assets文件夹的静态资源在webpack打包时,会把静态资源当做一个模块打包在js文件里面 components: 一般放置的是非路由组件全局组件 App.vue: 唯一的根组件 main.js: 程序入口文件也是整个程序当中最先执行的文件 babel.config.js配置文件babel相关 package.json依赖关系 2、项目运行起来浏览器自动打开
package.json文件
scripts: {serve: vue-cli-service serve --open,build: vue-cli-service build,lint: vue-cli-service lint},
3、eslint校验工具的关闭:
vue.config.js文件
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,//运行后是否自动在浏览器打开lintOnSave: true,//关闭eslint校验
})4、安装less 、less-loader
jsconfig.json文件
src文件夹简写方法配置别名
配置别名提示【代表的是src文件夹这样将来文件过多找的时候方便】
{
compilerOptions: {
target: es5,
module: esnext,
baseUrl: ./,
moduleResolution: node,
paths: {
/*: [
src/*
]
}
},
exclude: [node_modules, dist]
}
5、安装vue-router npm install --save vue-router --save:可以让你安装的依赖在package.json文件当中进行记录
