Vue基本环境搭建

2024-04-27 15:08:36

字体：大中小

来源：转载

供稿：网友

Vue基本环境的搭建，可能写的没那么明了，里面有很多无关的东西，例如C:/Users/jaky>这些，每个人的机器都可能不一样。所以。读者需要耐心点（sorry），了解命令即可// 这里是安装淘宝的npm镜像，国外的npm对网络要求较高C:/Users/jaky>npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm 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-colorE:/Program Files/nodejs/node_global/cnpm -> E:/Program Files/nodejs/node_global/node_modules/cnpm/bin/cnpmcnpm@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.9C:/Users/jaky>cnpm -v4.4.0C:/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-clideprecate 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 numberE:/>cd ALLWorkspaceE:/AllWorkspace>cd vueE:/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/webpackE:/AllWorkspace/vue>cd my-first-vue-projectE:/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 .babelrc2016/10/23 13:52 147 .editorconfig2016/10/23 13:52 23 .eslintignore2016/10/23 13:52 559 .eslintrc.js2016/10/23 13:52 44 .gitignore2016/10/23 13:52 <DIR> build2016/10/23 13:52 <DIR> config2016/10/23 13:52 208 index.html2016/10/23 13:52 1,528 package.json2016/10/23 13:52 405 README.md2016/10/23 13:52 <DIR> src2016/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 id="app"> {{ message }}</div><script src="../js/vue.min.js"></script><script src="../js/vue-resource.min.js"></script><script src="../js/index.js"></script>index.js:var vm = new Vue({ el: '#app', data: { message: 'keep learning' }})项目结构图：