首页 > 求个vuePPT > 求个vuePPT,npm使用手记

求个vuePPT,npm使用手记

互联网 2021-06-15 20:06:20 Tags:求个vuePPT

npm使用手记红烧牛的专栏CSDN博客npm的使用CSDN 专业开发者社区

npm 是node.js 环境下的包管理器,非常强大智能.

生活这这片神奇的土地上,各种奇葩手段屡见不鲜啊.

为什么要换源? npm 官方站点 http://www.npmjs.org/ 并没有被墙,但是下载第三方依赖包的速度让人着急啊!

就拿阿里云环境来说,有时npm 一个包也需要耐心等待......等待过去也许是原地踏步,也许就是安装失败.

幸运的是,国内有几个镜像站点可以供我们使用,本人在使用 http://www.cnpmjs.org/ 

速度非常快,镜像站会实时更新,为我们节省了好多时间.如何给本机换源呢?

(1)通过 config 配置指向国内镜像源

npm config set registry http://registry.cnpmjs.org //配置指向源npm info express  //下载安装第三方包

(2)通过 npm 命令指定下载源

npm --registry http://registry.cnpmjs.org info express

(3)在配置文件 ~/.npmrc 文件写入源地址

nano ~/.npmrc   //打开配置文件registry =https://registry.npm.taobao.org   //写入配置文件

推荐使用最后一种方法,一劳永逸,前面2钟方法都是临时改变包下载源.

如果你不像使用国内镜像站点,只需要将 写入 ~/.npmrc 的配置内容删除即可.

安装环境

利用npm install安装插件时,因为npm容易被墙,导致安装速度很慢或者安装不上,可以使用国内的淘宝镜像来安装。采用如下的命令:

1sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

这样,我们以后安装可以直接采用cnpm进行安装。

创建一个空文件夹, 这里是创建VuePPT

1mkdir VuePPT

进入文件夹,执行如下初始化命令,生成package.json文件

1npm init 安装vue 1cnpm install vuejs/vue

结果截图:

安装webpack 1cnpm install webpack

在根目录中创建一个webpack.config.js文件,用来配置webpack加载器

安装vue-loader 1cnpm install vue-loader

结果截图:

安装vue-loader会把它所依赖的插件都安装好:

安装vue-router 1cnpm install vue-router

结果截图:

编写代码 实现一个简单首页,比如写一个欢迎页面

1、准备好页面,demo1.vue

12345678910111213141516171819h2{color: red;}{{msg}}module.exports = {data: function(){return {msg: "欢迎你来到这里!"}}} 2、准备好入口文件demo1.js 123456789var Vue = require("vue");var demo1 = require("./views/demo1.vue");new Vue({el: "#app",components: {demo: demo1}});3、准备好webpack.config.js 1234567891011121314151617181920var path = require("path");var ROOT_PATH = path.resolve(__dirname);var APP_PATH = path.resolve(ROOT_PATH, "src");var BUILD_PATH = path.resolve(ROOT_PATH, "build");module.exports = {debug: true,entry: APP_PATH + "/demo1.js",output: {path: BUILD_PATH,filename: "demo1.js"},module: {loaders: [{test: /\.vue$/,loader: 'vue'}]}}4、执行命令

在命令行执行如下命令,命令执行成功后可以看到build文件夹中有demo1.js文件。

1webpack5、准备测试文件demo1.html 1234567891011121314简单地欢迎页面

大功告成!那么问题来了,如此简单地功能,为何要如此复杂的操作呢?

如何实现包含多个页面的APP? 1、请看下面的目录结构

2、菜单(menu.vue) 12345678910111213141516171819202122232425262728首页关于登录注册发送消息module.exports = {data: function(){return {};}}3、路由文件(router.js) 12345678910111213141516171819202122232425262728293031323334var index = require("./views/index.vue");var about = require("./views/about.vue");var login = require("./views/login.vue");var register = require("./views/register.vue");var send = require("./views/send.vue");module.exports = function(router){router.map({"/": {name: 'index', //首页component: index},"/index": {name: 'index', //首页component: index},"/login": {name: "login", //登录component: login},"/about": {name: "about", //关于component: about},"/register": {name: "register", //注册component: register},"/send": {name: "send", //发送component: send}});}4、主文件(main.js) 12345678910111213141516var Vue = require("vue");var app = Vue.extend({});var VueRouter = require("vue-router");Vue.use(VueRouter);//实例化VueRoutervar router = new VueRouter({hashbang: true,history: false,saveScrollPosition: true,transitionOnLoad: true});require('./router')(router);router.start(app, "body");5、webpack.config.js设置 1234567891011121314151617181920212223242526272829var path = require('path');// 定义文件的一些路径var ROOT_PATH = path.resolve(__dirname);var APP_PATH = path.resolve(ROOT_PATH, 'src');var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');module.exports = {debug: true,entry: APP_PATH+"/main.js",output: {path: BUILD_PATH,filename: 'build.js'},module: {loaders: [{test: /\.vue$/,loader: 'vue'}],devServer: {historyApiFallback: true,hot: true,inline: true,progress: true}}}6、执行webpack命令,并构建html文件入口,html文件如下: 1234567891011猪猪侠的消息系统 PPT

地址:https://sally-xiao.gitbooks.io/book/content/

免责声明:非注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给网站管理员发送电子邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),网站管理员将在收到邮件24小时内删除。

相关阅读