Vue入门

环境搭建

命令安装

sudo apt install nodejs # 安装node
sudo apt install npm # 安装npm
npm install --global vue-cli # 安装vue命令行工具
npm view jquery versions # 查看所有版本
npm install --save jquery@2.1.4 # 安装指定版本

创建新项目

npm install -g nrm
nrm use cnpm
vue init webpack project_name # 创建一个基于webpack模板的新项目
cd project_name
cnpm install / npm install #安装依赖，在项目根目录下查找package.json，并安装所有依赖
npm run dev # 运行项目

解决npm的shasum check failed for错误

使用npm安装一些包失败，类似如下报错情况：

C:\Program Files\nodejs>npm update npm
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "update" "npm"
npm ERR! node v6.2.0
npm ERR! npm v2.14.19

npm ERR! shasum check failed for C:\Users\kuaima\AppData\Local\Temp\npm-18136-7181dc7d\registry.npmjs.org\npm\-\npm-4.0.5.tgz
npm ERR! Expected: a9c3c00c3c5bd6b0538c71109e019afd9d5b1403
npm ERR! Actual: 229ee9303b213d8ad584a6d4f65b971874d5b0e9
npm ERR! From: https://registry.npmjs.org/npm/-/npm-4.0.5.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR! C:\Program Files\nodejs\npm-debug.log

npm install 无响应解决方案（来自体验盒子），均可解决 npm install 慢、npm install 无响应、npm install 无法安装的问题。

方法一：使用cnpm，用淘宝 NPM 镜像

cnpm -g --registry=https:registry.npm.taobao.org

上面这种镜像使用方式将配置写死，下次用的时候配置还在。附：搜索镜像: http://cnpmjs.org

从 registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPMregistry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从淘宝 NPM 安装了.

安装模块 | $ cnpm install [name]
同步模块 | $ cnpm sync [moduleName]

注意：cnpm支持 npm 除了 publish 之外的所有命令，也就是不支持publish，当然这并不影响我们使用，publish时换回npm即可，这样也能解决npm install无响应的问题。

方法二：使用smart-npm，用淘宝NPM镜像

智能的 npm，让你在中国使用 npm 时，下载速度更快，使用更方便！
由于用 npm 时，默认它会访问国外资源，所以会非常卡，有时甚至会被墙。
smart-npm 可以在我们使用 npm install 时自动从国内的镜像下载资源，而在我们使用 npm publish 又能发布到官方的 registry 上。

安装：

如果 window 用户安装最新版本不成功的话，可以试试安装 smart-npm@1。这样做的原因是，

npm 的升级使得在 mac 上无法通过 bin 别名的方式覆盖原来的 npm，只能通过先删除原来的 npm link 文件，再创建一个新的，但这种方式在 window 上可能会有问题。所以，如果你是 window 用户，并且通过上面脚本无法安装成功的话，可以用下面脚本再试试。

npm install --global smart-npm --registry=https://registry.npm.taobao.org/

安装成功后默认会在你的 npm 用户配置文件 ~/.npmrc 中添加淘宝的 registry。

卸载

npm smart uninstall # 2.x.x 版本的 smart-npm 在卸载前需要先执行此脚本
npm uninstall --global smart-npm

注意：如果直接执行 npm uninstall 会导致找不到 npm 文件 Mac 或 Linux 用户可以使用下面命令恢复之前备份的

npm mv (whichnpm−original)(dirname $(which npm-original))/npm

使用

安装后系统的 npm 会被替换了，如果你要使用原生的 npm 命令，请用 npm-original 。
新的 npm 会自动根据你使用的命令切换 registry，当你使用 publish, config, adduser, star 等（click here to see more）命令时，会强制使用官方的 registry https://registry.npmjs.org；当你使用其它命令时，都会使用淘宝的镜像https://registry.npm.taobao.org/。
如果要强制使用官方的 registry，只要在命令后面加上 --npm 即可。比如: npm install jquery --npm，就会使用官方的 registry 去拉取 jquery。（当镜像没有及时更新时，用此会选项很有效）
如果要强制使用某个 registry 时，只要在命令后面添加 registry 参数即可。比如：npm install jquery --registry=https://r.cnpmjs.org，就会使用你指定的 registry 去拉取 jquery。
如果你想修改默认的淘宝镜像或者官方的 registry，可以在你的环境变量中添加这两个参数：NPM_OFFICIAL_REGISTRY，NPM_MIRROR_REGISTRY，以此来修改默认的官方 registry 和淘宝镜像 registry。更多环境变量的配置请点击这里

方法三：使用nrm

nrm允许你快速地在如下 NPM 源间切换，现已支持now include: npm, cnpm, taobao,nj(nodejitsu), rednpm。注意：nrm只是一个源管理器，也不能使用publish命令。

安装

$ npm install -g nrm

示例

$ nrm ls
  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

$ nrm use cnpm  //switch registry to cnpm
Registry has been set to: http://r.cnpmjs.org/

使用

Usage: nrm [options] [command]
 
  Commands:
 
    ls                           List all the registries
    use                Change registry to registry
    add   [home]  Add one custom registry
    del                Delete one custom registry
    home  [browser]    Open the homepage of registry with optional browser
    test [registry]              Show the response time for one or all registries
    help                         Print this help
 
  Options:
 
    -h, --help     output usage information
    -V, --version  output the version number

增加源 | nrm add [home]
删除源 | nrm del
测试速度 | nrm test

源码安装

node tar.xz 文件位置打开终端，如下

$ ls node-v11.8.0-linux-x64.tar.xz

分别在终端中执行如下命令，先设置对应的变量，然后将二进制存档文件解压到 /usr/local/lib/nodejs 目录

VERSION=v11.8.0 
DISTRO=linux-x64 
sudo mkdir /usr/local/lib/nodejs 
sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs 
sudo mv /usr/local/lib/nodejs/node-$VERSION-$DISTRO /usr/local/lib/nodejs/node-$VERSION

设置 Node 环境变量

export NODEJS_HOME=/usr/local/lib/nodejs/node-$VERSION/bin 
export PATH=$NODEJS_HOME:$PATH

刷新 profile 文件

. ~/.profile

测试安装结果（当前终端会看到安装成功，可以正常显示对应的安装版本，重新打开一个新的终端是提示没有安装成功的）

$ node -v v11.8.0 $ npm -v 6.5.0

创建 sudo 链接

sudo ln -s /usr/local/lib/nodejs/node-$VERSION/bin/node /usr/bin/node 
sudo ln -s /usr/local/lib/nodejs/node-$VERSION/bin/npm /usr/bin/npm
sudo ln -s /usr/local/lib/nodejs/node-$VERSION/bin/npx /usr/bin/npx

重新打开一个终端测试 node npm npx 版本

$ node -v v11.8.0 w@w:~$ npm -v 6.5.0 w@w:~$ npx -v 6.5.0

vue项目环境搭建及一个简单的vue例子

版权声明：本文为CSDN博主「飞翔在蓝天下的蜂鸟」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33036599/article/details/79656597

vue-cli脚手架的搭建步骤

首先，确定你的电脑上已经安装了nodejs，可以使用npm包管理器安装环境，如果还没有安装node环境，可参考我的另外一篇博客中提到的关于node的安装步骤初识react之react+webpack+es6环境配置步骤整理，这里就不多说了。

1）打开cmd命令窗口，切换到你要新建项目的文件夹下，此时可使用node -v检查node的版本，如果出现版本号则node已安装。
2）使用以下命令全局安装

vue-cli npm install -g vue-cli

或者使用国内的淘宝镜像

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

3）使用命令 vue init webpack vue-demo 搭建vue项目, “vue-demo” 是你的项目名称。

3）配置需要安装的vue环境

4）以上步骤完成之后，项目目录结构如下图所示，其中的src目录下的文件，就是我们自己需要使用到的文件了。

5）执行 npm run dev 命令，启动项目
这时我们可以通过浏览器访问链接 http://localhost:8080 来访问项目了。这时页面如下图：

二、一个简单的不能再简单的vue例子

这里，我们在已经搭建好的vue项目中，实现一个从项目已有的Hello World! 跳转至我们自己创建的Hello Vue组件页面的例子。

1）首先，在已经搭建好的环境的components下新建一个vue文件，作为我们自己的vue组件。

2）然后在HelloVue.vue文件中添加以下代码，vue文件的格式分为三个模块，如下图所示，首先时template模板，然后是script标签及代码，最后是style样式。

<template>
  <div id="vue">Hello Vue.js! {{ message }}</div>
</template>

<script type="text/javascript">
  export default { //这里需要将模块引出，可在其他地方使用
    name: "HelloVue",
    data (){ //注意：data即使不需要传数据，也必须return,否则会报错
      return {
        message: "啦啦啦啦啦"
      }
    }
  }
</script>

<style type="text/css">
  #vue{
    color: green;
    font-size: 28px;
  }
</style>

3）在项目搭建时生成的HelloWorld.vue文件中的template中添加一个链接，用于跳转至我们自己的组件内容。
关于 router-link 的使用，请参考 vue-router文档。

<h1> 
    <router-link to="day01">跳转至HelloVue</router-link>
 </h1>

4）接着，我们修改项目中的router目录下的index.js文件，这是一个vue-router的简单应用。对于路由，我们一般会想到宽带安装时我们使用的路由器，这里的路由主要是为了定义页面之前的跳转。在router下的index.js文件中添加以下代码：

注意：这里的mode: 'history' 作用参考vue-router文档。
5) 最后，我们刷新浏览器就可以看到效果了。

问题汇总

Error: watch ENOSPC　的解决方案

watch需要监听很多文件的改动，但是fedora、ubuntu系统的文件句柄其实是有限制的，因此可以使用以下命令：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

        location /assistantUI {
            alias /PycharmProjects/assistant/UI/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
         }

        location ^~  /assistant/ {
                proxy_pass http://127.0.0.1:9088;
        }

参考地址

安装node.js:https://www.jianshu.com/p/f3dad64d896a

阿里元开发文档：https://cloud.tencent.com/developer/devdocs

posted @ 2019-09-14 16:35 逐梦客！阅读(176) 评论(0) 收藏举报

刷新页面返回顶部