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 deipe@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' }})項目結構圖：