vue学习

最新推荐文章于 2024-08-27 18:22:49 发布

北风七月

最新推荐文章于 2024-08-27 18:22:49 发布

阅读量582

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/p819220030/article/details/86678248

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 先安装Node，https://nodejs.org/en/download/

liushadeMacBook-Pro:~ liusha$ node -v
v10.15.0
liushadeMacBook-Pro:~ liusha$ npm -v
6.4.1

2 Node内含有npm，这里再安装淘宝NP镜像，https://npm/taobao/org

没加sudo时会有权限异常

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

安装脚手架

命令 cnpm install -g vue-cli

liushadeMacBook-Pro:~ liusha$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
Password:
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ cnpm@6.0.0
added 679 packages from 885 contributors in 17.333s
liushadeMacBook-Pro:~ liusha$ cnpm -v
cnpm@6.0.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.7.0 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@10.15.0 (/usr/local/bin/node)
npminstall@3.20.2 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 16.7.0 
registry=https://registry.npm.taobao.org
liushadeMacBook-Pro:~ liusha$

liushadeMacBook-Pro:~ liusha$ sudo cnpm install -g vue-cli
Downloading vue-cli to /usr/local/lib/node_modules/vue-cli_tmp
Copying /usr/local/lib/node_modules/vue-cli_tmp/_vue-cli@2.9.6@vue-cli to /usr/local/lib/node_modules/vue-cli
Installing vue-cli's dependencies to /usr/local/lib/node_modules/vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules/_commander@2.19.0@commander
[2/20] multimatch@^2.1.0 installed at node_modules/_multimatch@2.1.0@multimatch
[3/20] minimatch@^3.0.0 installed at node_modules/_minimatch@3.0.4@minimatch
[4/20] ora@^1.3.0 installed at node_modules/_ora@1.4.0@ora
[5/20] rimraf@^2.5.0 existed at node_modules/_rimraf@2.6.3@rimraf
[6/20] chalk@^2.1.0 installed at node_modules/_chalk@2.4.2@chalk
[7/20] consolidate@^0.14.0 installed at node_modules/_consolidate@0.14.5@consolidate
[8/20] semver@^5.1.0 installed at node_modules/_semver@5.6.0@semver
[9/20] uid@0.0.2 installed at node_modules/_uid@0.0.2@uid
[10/20] read-metadata@^1.0.0 installed at node_modules/_read-metadata@1.0.0@read-metadata
[11/20] coffee-script@1.12.7 existed at node_modules/_coffee-script@1.12.7@coffee-script
[12/20] user-home@^2.0.0 installed at node_modules/_user-home@2.0.0@user-home
[13/20] tildify@^1.2.0 installed at node_modules/_tildify@1.2.0@tildify
[14/20] metalsmith@^2.1.0 installed at node_modules/_metalsmith@2.3.0@metalsmith
[15/20] validate-npm-package-name@^3.0.0 installed at node_modules/_validate-npm-package-name@3.0.0@validate-npm-package-name
[16/20] download-git-repo@^1.0.1 installed at node_modules/_download-git-repo@1.1.0@download-git-repo
[17/20] handlebars@^4.0.5 installed at node_modules/_handlebars@4.0.12@handlebars
[18/20] async@^2.4.0 installed at node_modules/_async@2.6.1@async
[19/20] request@^2.67.0 installed at node_modules/_request@2.88.0@request
[20/20] inquirer@^6.0.0 installed at node_modules/_inquirer@6.2.1@inquirer
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2019-01-21): 2 packages (detail see file /usr/local/lib/node_modules/vue-cli/node_modules/.recently_updates.txt)
  Today:
    → inquirer@6.2.1 › ansi-escapes@^3.0.0(3.2.0) (11:36:59)
  2019-01-24
    → request@2.88.0 › http-signature@1.2.0 › sshpk@^1.7.0(1.16.1) (05:34:23)
All packages installed (238 packages installed from npm registry, used 4s(network 4s), speed 1.21MB/s, json 222(393.5kB), tarball 4.7MB)
[vue-cli@2.9.6] link /usr/local/bin/vue@ -> /usr/local/lib/node_modules/vue-cli/bin/vue
[vue-cli@2.9.6] link /usr/local/bin/vue-init@ -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
[vue-cli@2.9.6] link /usr/local/bin/vue-list@ -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
liushadeMacBook-Pro:~ liusha$ 
liushadeMacBook-Pro:~ liusha$ 
liushadeMacBook-Pro:~ liusha$ vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]
liushadeMacBook-Pro:~ liusha$

3 下模板

命令 vue init webpack {项目名}

liushadeMacBook-Pro:~ liusha$ vue init webpack my-first-vue-project

xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.
? Project name my-first-vue-project
? Project description this is my first vue project
? Author ydx
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

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


# Installing project dependencies ...
# ========================

npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> fsevents@1.2.7 install /Users/liusha/my-first-vue-project/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download 
[fsevents] Success: "/Users/liusha/my-first-vue-project/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/liusha/my-first-vue-project/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.3.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

added 1196 packages from 667 contributors and audited 10654 packages in 223.928s
found 2 vulnerabilities (1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

  cd my-first-vue-project
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack


liushadeMacBook-Pro:~ liusha$ ls
Applications			Pictures
Desktop				Public
Documents			intellij-soapui-workspace.xml
Downloads			jmeter.log
Library				my-first-vue-project
Movies				soapui-settings.xml
Music
liushadeMacBook-Pro:~ liusha$ cd my-first-vue-project/
liushadeMacBook-Pro:my-first-vue-project liusha$ ls
README.md		index.html		package.json
build			node_modules		src
config			package-lock.json	static
liushadeMacBook-Pro:my-first-vue-project liusha$ ls
README.md

4 运行项目

命令 npm run dev

liushadeMacBook-Pro:my-first-vue-project liusha$ npm run dev

> my-first-vue-project@1.0.0 dev /Users/liusha/my-first-vue-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 20/25 modules 5 active ...usha/my-first-vue-project/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                 b      
 DONE  Compiled successfully in 2819ms                                  15:23:52

 I  Your application is running here: http://localhost:8080

5 intellj 下运行Vue项目

参考https://blog.csdn.net/qq_42564846/article/details/82688266

注意点，点运行不会debugger