npm安装vue-cli2及参数设置

亲爱的小伙伴,你还在为搭建vue脚手架而烦恼吗?enen摊牌了,小招确实烦恼过,梦里寻它千百度,终于被小招找到了解决方法,快来随小招一试吧~.~ 

npm(ndoe package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)

npm参数设置:

-g参数:参数安装(global),可以在命令行下直接使用

如:npm root -g:可以查看全局安装的文件夹位置

-S或--save 参数:安装包信息将加入到dependencies(生产阶段的依赖)

如:npm i -gS vue-cli

-D或--save--dev参数:安装包信息将加入到devDependencies(开发环境依赖)

如:npm i -gD vue-cli

i 是install的缩写(注意:前面没有“-”)

如:npm i -g vue-cli 和 npm install -g vue-cli效果是一样的

npm安装vue-cli2三种方式:

方式一:npm直接安装,获取vue-cli镜像资源

命令:npm install -g vue-cli

方式二:通过国内淘宝镜像来获取vue-cli镜像资源(分为三种方法)

方法1.npm手动指定从淘宝镜像服务器获取资源(每一次安装都需要--registry)

命令:npm install -gd express --registry=http://registry.npm.taobao.org

方法2.为了避免每一次安装都需要--registry,可以使用命令永久设置

命令1:npm config set registry http://registry.npm.taobao.org

命令2:npm install -g vue-cli

 方法3.cnpm安装vue-cli2(如果没有安装cnpm,请先安装快乐分享🔗:cnpm安装vue-cli2_m0_58697127的博客-CSDN博客

命令:cnpm install -gd vue-cli

检查vue-cli2是否安装成功

1.命令:vue -V

OK大工告成,安装成功啦,接下来可以愉快地学习vue项目开发!!

亲爱的小伙伴,要不断尝试哦!感谢给小招一个点赞收藏评论转发鼓励一下吧-.-


文章持续更新,可以VX搜一搜「 小招猿记 」遇到问题第一时间回复哦,欢迎Star。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要将vue-cli2项目添加ssr打包,需要进行以下步骤: 1. 首先,安装相应的依赖包。在项目根目录下运行以下命令: ``` npm install vue-server-renderer --save npm install webpack-node-externals --save-dev ``` 这样可以安装vue-server-renderer和webpack-node-externals两个依赖包。 2. 创建一个新文件,用于处理服务器端渲染。在项目根目录下创建一个`build`文件夹,并在其中创建一个名为`webpack.server.config.js`的文件。在该文件中,添加以下内容: ```javascript const path = require('path') const webpack = require('webpack') const nodeExternals = require('webpack-node-externals') module.exports = { target: 'node', entry: './src/server.js', // 根据实际文件名修改 output: { filename: 'server.bundle.js', path: path.join(__dirname, '../dist'), libraryTarget: 'commonjs2' }, externals: [nodeExternals()], module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] } } ``` 3. 修改package.json文件,添加相应的脚本。在`scripts`字段中添加以下内容: ```json "scripts": { "build:server": "webpack --config build/webpack.server.config.js", "build": "npm run build:server && npm run build:client", "build:client": "vue-cli-service build" } ``` 这样可以添加三个命令:`build:server`用于构建服务器端渲染文件,`build:client`用于构建客户端文件,`build`用于同时构建服务器端和客户端文件。 4. 创建一个服务器端入口文件。在`src`文件夹下创建一个名为`server.js`的文件,并在其中添加以下内容: ```javascript const fs = require('fs') const path = require('path') const express = require('express') const { createBundleRenderer } = require('vue-server-renderer') const server = express() const template = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8') const serverBundle = require('./dist/server.bundle') const renderer = createBundleRenderer(serverBundle, { template, runInNewContext: false }) server.use(express.static(path.resolve(__dirname, '../dist'))) server.get('*', (req, res) => { const context = { url: req.url } renderer.renderToString(context, (err, html) => { if (err) { console.error(err) res.status(500).end('Server error') return } res.end(html) }) }) server.listen(3000, () => { console.log('Server started at http://localhost:3000') }) ``` 在这个文件中,首先引入所需的模块。然后,使用`createBundleRenderer`方法创建bundle渲染器,并传入相关参数。接着,设置静态文件目录,并处理所有请求,将渲染好的HTML返回给客户端。 5. 最后,运行`npm run build`命令进行打包。打包完成后,可以运行`node dist/server.bundle.js`启动服务器端。 至此,我们成功将vue-cli2项目添加了ssr打包。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小招猿记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值