Vue 项目启动

Vue 项目启动

一、脚手架搭建

1.1 node.js环境准备

下载地址：https://nodejs.p2hp.com/download/

 -查看node版本
        	node -v
        -安装完，释放两个可执行文件
        	node  等同于  python
            npm   等同于    pip

1.2 npm生产条件优化(可选）

安装第三方模块，速度很慢，淘宝做了个cnpm，以后咱们可以使用cnpm替代npm，会去淘宝镜像站下载，速度快

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

1.3 在node环境中装vue-cli （类似于装django）

cnpm install -g @vue/cli

1.4 使用脚手架，创建vue项目

vue create 项目名

vue create  myfirstvue
		

1.5 vue-cli 命令行创建项目

# 1 vue create 项目名
     vue create  myfirstvue
# 2 选择入下图
# 3 选择Babel，Router，vuex
	# Babel：语法转换
    # Router：页面跳转 路由效果
    # vuex：状态管理器，存储数据的
    
# 3 选vue版本

# 4 选package.json
# 5 之前的设置，保存与不保存都可以

1.6 使用vue ui创建项目

需要终端和浏览器界面同时交互

1.7 在pycharm 中创建vue项目

需要找到@vue/li在 本地的位置,选中,取消勾选默认配置

2 Vue 项目

2.1 目录

myfirstvue           # 项目名
	-node_modules    # 文件夹，放了该项目所有的依赖，很小很多，以后把项目传给别人，这个要删除 ，别人拿到执行  cnpm install  安装依赖
    -public           # 文件夹
    	-favicon.ico  # 小图标，浏览器上面显示，可以替换
    	-index.html   # spa，这个html是整个项目的一个html  你不要动
    -src              # 以后动这里面的东西，所有代码都在者
    	-assets       # 文件夹，放一些静态资源，图片，js，css
        -components    #  以后小组件写在里面  xx.vue
        	-HelloWorld.vue  # 默认提供了一个组件
        -router     # 装了vueRouter就会有这个文件夹，如果不装就没有，现在不用关注
        	-index.js
        -store      # 装了vuex就会有，不装就没有   
        	-index.js
   		 -views    # 文件夹，里面放了所有页面组件
        	-AboutView.vue    # 首页组件
		    -HomeView.vue	# 关于组件 	 
          - App.vue         # 跟组件
          - main.js          # 项目启动的入口文件，核心
            
    -.gitignore  # git相关，后面学了就会了
    -README.md   # 项目介绍
    -package.json  # 重要，存放依赖
    -vue.config.js  # vue项目的配置文件
    -package-lock.json # 锁定文件
    babel.config.js  # babel的配置，不用管
    jsconfig.json
    
    
    
### 总结
以后只需要关注src文件夹下的文件即可

2.2 创建页面

1 只需要创建页面组件
	IndexView.vue
2 里面有三部分
	# 2.1 template 必须只能有一个标签，以后所有的html都写在这里
    <template>
      <div class="home">
        <h1>我是首页</h1>
        <button @click="handleClick">点我看美女</button>
      </div>
    </template>
    
    #2.2 script 标签写js代码
        <script>
        export default {
          name: 'HomeView',
          data(){return {
              
          }},
          methods: {
            handleClick() {
              alert('美女')
            }
          }
        }
    	</script>
        
   # 2.3 所有的样式，写在<style>
    <style>
    h1{
      font-size: 80px;
    }
    </style>