Vue基本环境搭建

Vue基本环境的搭建，可能写的没那么明了，里面有很多无关的东西，例如C:\Users\jaky>这些，每个人的机器都可能不一样。所以。读者需要耐心点（sorry），了解命令即可// 这里是安装淘宝的npm镜像，国外的npm对网络要求较高C:\Users\jaky>npm install -g cnpm --registry=https://registry.npm.taobao.

jaky0306

5384人浏览 · 2017-02-06 16:29:59

jaky0306 · 2017-02-06 16:29:59 发布

Vue基本环境的搭建，可能写的没那么明了，里面有很多无关的东西，例如C:\Users\jaky>这些，每个人的机器都可能不一样。所以。读者需要耐心点（sorry），了解命令即可

// 这里是安装淘宝的npm镜像，国外的npm对网络要求较高

C:\Users\jaky>npm install -g cnpm --registry= http://r.cnpmjs.org ( https://registry.npm.taobao.org 不可用)

npm WARN deprecated has-color@0.1.7: Renamed to supports-color. If you're using chalk, upgrade to the latest version. https://github.com/chalk/supports-color

E:\Program Files\nodejs\node_global\cnpm -> E:\Program Files\nodejs\node_global\node_modules\cnpm\bin\cnpm

cnpm@4.4.0 E:\Program Files\nodejs\node_global\node_modules\cnpm

├── npm-request@1.0.0

├── auto-correct@1.0.0

├── giturl@1.0.0

├── open@0.0.5

├── bagpipe@0.3.5

├── colors@1.1.2

├── commander@2.9.0 ( graceful-readlink@1.0.1)

├── debug@2.2.0 ( ms@0.7.1)

├── cross-spawn@0.2.9 ( lru-cache@2.7.3)

├── urllib@2.17.0 ( content-type@1.0.2, statuses@1.3.0, humanize-ms@1.2.0, iconv-lite@0.4.13, any-promise@1.3.0, digest-header@0.0.1, default-user-agent@1.0.0)

├── npminstall@2.9.4 ( node-homedir@0.0.1, destroy@1.0.4, binary-mirror-config@1.1.0, await-event@1.0.0, runscript@1.1.0, bytes@2.4.0, co@4.6.0, ms@0.7.1, semver@5.3.0, normalize-git-url@3.0.2, uuid@2.0.3, node-uuid@1.4.7, minimist@1.2.0, co-parallel@1.0.0, utility@1.8.0, cmd-shim@2.0.2, npm-package-arg@4.2.0, mkdirp@0.5.1, chalk@1.1.3, mz@2.4.0, ora@0.3.0, tar@2.2.1, co-fs-extra@1.2.1, rimraf@2.5.4, moment@2.15.1, node-gyp@3.4.0)

└── npm@3.10.9

C:\Users\jaky>cnpm -v

4.4.0

C:\Users\jaky>cnpm install -g vue //-g是全局安装的意思（安装在系统node的安装目录下），不加会在单前目录下安装

√ All packages installed (1 packages installed from npm registry, use 2s, speed 94.31kB/s, json 1(8.98kB), tarball 183.33kB)

C:\Users\jaky>cnpm install -g vue-cli

deprecate vue-cli@2.4.0 › metalsmith@2.2.0 › recursive-readdir@1.3.0 › minimatch@0.3.0 Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

√ All packages installed (381 packages installed from npm registry, use 15s, speed 532.4kB/s, json 792(3.96MB), tarball 3.78MB)

Recently updated (since 2016-10-16): 5 packages (detail see file node_modules/.recently_updates.txt)

C:\Users\jaky>vue

Usage: vue <command> [options]

Commands:

init generate a new project from a template

list list available official templates

help [cmd] display help for [cmd]

Options:

-h, --help output usage information

-V, --version output the version number

E:\>cd ALLWorkspace

E:\AllWorkspace>cd vue

E:\AllWorkspace\vue>vue init webpack my-first-vue-project //创建一个基于webpack模板的项目

This will install Vue 2.x version of template.

For Vue 1.x use: vue init webpack#1.0 my-first-vue-project

? Project name my-first-vue-project

? Project description this is jaky first vue project

? Author jaky

? Vue build standalone

? Use ESLint to lint your code? Yes //这里直接no 吧

? Pick an ESLint preset Standard

? Setup unit tests with Karma + Mocha? No

? Setup e2e tests with Nightwatch? No

vue-cli · Generated "my-first-vue-project".

To get started:

cd my-first-vue-project

npm install

npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

E:\AllWorkspace\vue>cd my-first-vue-project

E:\AllWorkspace\vue\my-first-vue-project>dir

驱动器 E 中的卷是 Jaky

卷的序列号是 0009-20BE

E:\AllWorkspace\vue\my-first-vue-project 的目录

2016/10/23 13:52 <DIR> .

2016/10/23 13:52 <DIR> ..

2016/10/23 13:52 96 .babelrc

2016/10/23 13:52 147 .editorconfig

2016/10/23 13:52 23 .eslintignore

2016/10/23 13:52 559 .eslintrc.js

2016/10/23 13:52 44 .gitignore

2016/10/23 13:52 <DIR> build

2016/10/23 13:52 <DIR> config

2016/10/23 13:52 208 index.html

2016/10/23 13:52 1,528 package.json

2016/10/23 13:52 405 README.md

2016/10/23 13:52 <DIR> src

2016/10/23 13:52 <DIR> static

8 个文件 3,010 字节

6 个目录 65,676,701,696 可用字节

E:\AllWorkspace\vue\my-first-vue-project>cnpm install

/ Installing sha.js@2.2.6platform unsupported webpack@1.13.2 › watchpack@0.2.9 › chokidar@1.6.1 › fsevents@1.0.14 Package require os(darwin) not compatible with your platform(win32)

- Installing sha.js@2.2.6[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)

√ All packages installed (613 packages installed from npm registry, use 32s, speed 498.98kB/s, json 1418(7.27MB), tarball 8.14MB)

Recently updated (since 2016-10-16): 16 packages (detail see file node_modules/.recently_updates.txt)

Today:

→ css-loader@0.25.0 › cssnano@3.7.7 › postcss-normalize-url@3.0.7 › normalize-url@1.7.0 (02:08:26)

→ eslint-plugin-html@1.5.4 (01:09:56)

E:\AllWorkspace\vue\my-first-vue-project>npm run dev

> my-first-vue-project@1.0.0 dev E:\AllWorkspace\vue\my-first-vue-project

> node build/dev-server.js

结构：

结果：

当然，还有可以直接使用下载好的js,直接在网页中引用即可

如：

index.html:

</div>

index.js:

var vm = new Vue({

el: '#app',

data: {

message: 'keep learning'

}

})

项目结构图：

结果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^