公司做网站要花多少钱整合营销策划
Vue CLI
创建Vue CLI项目
【步骤】
- 命名项目空间：在电脑里创建文件夹，用于存储所有项目；
- 定位项目空间：在
"CMD窗口"里定位到工程的项目空间上；
- 方法1：(a)用
"WIN+R"打开运行窗口，输入"CMD"进入"CMD窗口"；(b)输入项目空间所在盘符(如"f:")后回车；©输入"cd 根目录路径(可拖拽文件夹到CMD窗口)"后按"enter"键即可；- 方法2：(a)打开项目空间所在文件夹；(b)"
ALT+D"输入"CMD"后按"enter"键即可；- 创建项目第一步：在
"CMD窗口"输入"vue create 项目名称"后按"enter"键后等待跳转即可(像是卡住了,是在加载,一定不要多次按空格)；- 创建项目第二步：用
"↑"键和"↓"键进行选择，选择选项(“Manually select features”)后按"enter"键进入下一页面；- 创建项目第三步：用
"↑"键和"↓"键选择，"space"键修改，选"Babel"、"Router"、"Vuex"后按"enter"键进入下一页面；- 创建项目第四步：选
"2.x"后按下回车，出现"(Y/n)"继续按"enter"键进入下一页面；- 创建项目第五步：出现
"？Where do you prefer placing config for Babel,ESLint,etc.?(Use arrow keys)"(翻译：你要将文件放到哪里?)，选择第二项("In package.json")后按"enter"键，出现"(y/N)"，继续按"enter"键即可；- 加载相关的文件：此时会自动加载相关文件，加载完毕后出现
"Successfully created project 项目名称."则表示项目创建成功；
【注意】
- 相关的文件最好不要有中文和空格；
- 出现
"error"相关，关掉重来试试；
启动Vue CLI项目
【步骤】
- 用软件
"IDEA"打开"node.js"创建好的项目；- 在软件左下角找到
"Terminal"选项卡并打开；
- 若定位是在项目的根目录上则进行下一步；
- 若没定位在项目的根目录上定位后下一步；
- 输入
"npm run serve"后回车，等待加载即可；"Compiled successfully in XXXms"代表成功；
【说明】
- 启动
Vue ClI项目也可通过"CMD窗口"这样的方式来完成；- 启动成功的提示还包括"http://localhost:8080"这样的网址；
- 在
CMD 窗口中，按下"Ctrl + C"即可停止已启动的项目；
解析Vue CLI项目
文件夹：.idea
【说明】：软件"IDEA"管理项目时自动生成的，可以无视；
文件夹：node_modules
【说明】：当前项目所需的依赖项(自己不要操作)；
【注意】：
- 此文件夹不会提交到
git，若需要的话用以下方式下载；- 若没有\缺失，可以在"Terminal"输入"npm install"来下载；
文件夹：public
【说明】：
- 是当前项目启动后的根路径，可存放各种资源（如
.css、.js、.jpeg）；- 若此文件夹下有
"1.jpg"，则可通过"http://loaclhost:8080/1.jpg"查看；
文件：favicon.ico
【说明】：项目的图标，每个项目在(编译后的)根目录下有此文件，会在浏览器中显示；
文件：index.html
【说明】：当前项目的页面，在
"Vue CLI"项目中有且仅有一个"HTML页面"；
文件夹：src
文件夹：assets
【说明】：资源文件夹，用于存放静态资源(如
.css、.js、jpeg)【注释】：反正就是存放不随程序运行而变化的文件(如：
logo.png)；
文件夹：components
【说明】：存放视图组件(被其他视图组件调用的)，是可能被复用的组件，并且在不同的调用中，传入的参数可以不同；
文件夹：router
文件：index.js
【说明】：路由配置文件，主要配置访问路径与视图组件的对应关系；
文件夹：store
文件：index.js
【说明】：存储共享的量的文件；
文件夹：views
【说明】：用于存放视图组件；
文件：APP.vue
【说明】：是
"index.html"默认加载的视图文件；
文件：main.js
【说明】：当前项目的主
".js"文件，通常用于管理一些配置；【注释】：如：添加了某些依赖项(如:
Element UI)后，可能需要在此处导入，才可以使得各".vue"文件可以使用这些依赖项；
文件：.gitignore
【说明】：用于配置哪些文件和文件夹不会提交到"git"，如果此项目不提交到"git"，则此文件没用；
文件：babel.config.js
【说明】："Babel"的配置文件，通常不用关心(不需要操作)；
文件：jsconfig.json
【说明】：
".js"文件的配置文件，通常不用关心(不需要操作)；
文件：LICENSE
【说明】：许可证协议文件，默认的项目中通常没有此文件，在"git"上公开的项目通常都包含此文件；
文件：pakcage.json
【说明】：主要配置当前项目的依赖项和项目的编译打包等配置，通常不建议手动修改；
文件：package-lock.json
【说明】：自动管理的配置文件，通常不建议手动修改；
文件：README.md
【说明】：此项目的说明文件，如果此项目提交到"git"，通常会显示在"git"的此项目的主页；
【注释】：通常应该在此文件中对项目进行必要的描述(如何配置此项目、如何启动此项目、相关的注意事项等)；
文件：vue.config.js
【说明】：
".vue"文件的配置文件，通常不用关心(不要操作)；
使用Vue CLI项目
.vue文件相关
【说明】：
.vue文件的源代码可以由3大部分组成：(a).页面设计<template>；(b).样式<style>；©.脚本<script>；- 这3大部分并不都是必须的，例如某个
.vue没有<script>也是完全正常的；【
<template>】：
- 其直接子标签必须有且仅有一个；
- 在其子级里如果出现了
<router-view/>，表示此区域将由另一个视图文件来负责设计；- 至于是哪个视图，取决于
"router/index.js"中的路由配置；
关于路由的简单配置
【说明】：
router下的index.js文件是用于配置路由的，在此文件中有一个"routes"常量，其属性值是一个对象的数组；- 数组元素中，可以有三个属性：
- path：路径（不可重复）；
- name：自定义名称，此属性可不配置；
- component：路径对应的视图组件(某个.vue文件加载得到的对象)，有两种加载方式：1.在当前文件的起始位置通过"import"语法静态导入(默认导入)；2.在此"component"属性值位置使用箭头函数结合"import"函数进行导入；
- 当显示的视图组件中使用到了
<router-view />时，将根据当前访问的URL（浏览器中的路径）来决定显示哪个视图；【例子】：
import HomeView from '../views/HomeView.vue'const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue')}]
Vue CLI的嵌套路由
【场景】：在开发实践中，一个项目中，可能存在这样的情况：
- 部分页面完全没有共用的部分，所以，在
App.vue中，要仅保留一个<router-view/>标签；- 但仍有部分页面存在共用的部分，所以，在其它
.vue文件中，也可能需要再次使用到<router-view />；- 具体表现为在
App.vue中只有<router-view/>，则此处实际显示的就是另外某个.vue了，但是在这些其他的.vue中也会用到<router-view/>，即出现了“嵌套”；
配置相关文件
【步骤】：
- 打开
CMD/终端窗口并且定位到当前项目的文件夹；- 输入
"npm i 需要的配置 -S"按下回车 , 静待即可；- 出现"added ‘数字’ packages in '数字’s"表示成功；
Element UI
【1】安装
Element UInpm i element-ui -S【2】配置
Element UI位置：
"src/main.js"；内容：
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);【3】检查
Element UI说明：
- 在"package.json"文件中查看是否有相关依赖(
"'element-ui':'^2.15.9")；- 若有，但不能用，则删掉"node_modules"，重新下载即可；
Axios
【1】安装
Axiosnpm i axios -S【2】配置
Axios位置：
"src/main.js"；内容：
import axios from 'axios' Vue.prototype.axios = axios说明：
- 需要注意，目标服务器可能是禁止跨域访问的（错误提示中有
CORS字样），在Spring Boot工程中，可以使得启动项目的类实现WebMvcConfigurer接口；