2.1.1
1)vue-cli 是官方提供的脚手架工具 (注意: 脚手架本身是个库)
2)GitHub:https://github.com/vuejs/vue-cli
3) 作用: 从 https://github.com/vuejs-templates 下载模板项目
2.1.2
(1). 脚手架全局安装 (特点: 安装上之后就再也不用安装了, 到处都可见)
NPM install -g vue-cli
NPM install -g @vue/cli-init
执行 NPM config list 查看目录
打开目录确保安装成功
cd 到两个文件的目录 cd C:\java\18.Node.JS\01.setup\node_cache
(2)vue init webpack vue_demo
vue init 名字 (模板) 项目名称
6 个模板如下: 通常选 webpack
下载的项目位置
(3)cd vue_demo (进入到创建项目目录)
(4)NPM install
NPM install 出现 "Unexpected end of JSON input while parsing near" 错误解决方法
原因是 node 之前版本较低, 升级版本后出现了; 如何解决呢?
解决办法, 升级之后运行: NPM cache clean --force
重新执行 NPM install
(5)NPM run dev
执行 NPM run dev 出现下图说明启动成功
(6) 访问: http://localhost:8080/
================================================================================================================================
进入项目 src-->components, 打开 HelloWorld.vue
- <template>
- <div class="hello">
- <h1>
- {{ msg }}
- </h1>
- <h2>
- Essential Links
- </h2>
- <ul>
- <li>
- <a href="https://vuejs.org" target="_blank">
- Core Docs
- </a>
- </li>
- <li>
- <a href="https://forum.vuejs.org" target="_blank">
- Forum
- </a>
- </li>
- <li>
- <a href="https://chat.vuejs.org" target="_blank">
- Community Chat
- </a>
- </li>
- <li>
- <a href="https://twitter.com/vuejs" target="_blank">
- </a>
- </li>
- <br>
- <li>
- <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
- Docs for This Template
- </a>
- </li>
- </ul>
- <h2>
- Ecosystem
- </h2>
- <ul>
- <li>
- <a href="http://router.vuejs.org/" target="_blank">
- vue-router
- </a>
- </li>
- <li>
- <a href="http://vuex.vuejs.org/" target="_blank">
- vuex
- </a>
- </li>
- <li>
- <a href="http://vue-loader.vuejs.org/" target="_blank">
- vue-loader
- </a>
- </li>
- <li>
- <a href="https://github.com/vuejs/awesome-vue" target="_blank">
- awesome-vue
- </a>
- </li>
- </ul>
- </div>
- </template>
- <script>
- export
- default {
- name:
- 'HelloWorld',
- data() {
- return {
- msg: 'Welcome to Your vue.js App'
- }
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0;
- } li { display: inline-block; margin: 0 10px; } a { color: #42b983; }
- </style>
观察上面其实是页面三要素: html+CSS+JS
1. 写 HTML 区域
2. 写 JS 区域
3. 写 CSS 区域
来源: http://www.bubuko.com/infodetail-3327793.html