그래픽과 텍스트로 설치부터 구축 과정까지 vue.js를 소개합니다.

이 글은 주로 vuejs의 설치부터 구축까지의 전체 과정을 자세하게 소개하고 있으니, 관심 있는 친구들이 참고하면 좋을 것 같습니다.

처음에는 vue를 사용할 때 해당 내용을 직접 다운로드 받았습니다. 파일은 이전 방식으로 운영했습니다

나중에 설치 후 사용하는 것이 더 편리한 것 같아서 프레임워크를 어떻게 설정해야 할지 고민하기 시작했습니다. 과정은 다음과 같습니다.

설치

1. nodejs 설치

온라인으로 다운로드하세요

2. 🎜>

열기 명령줄에

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

입력 3. webpack

cnpm install webpack -g

설치 4. 새 프로젝트를 생성하려는 경로에 새 폴더를 생성하여 프로젝트 파일을 저장합니다.

파일 경로에 cd

vue init webpack-simple 프로젝트 이름(이름은 중국어일 수 없음)

그 뒤에 몇 가지 기본 설정이 있습니다

Target directory exists. Continue? (Y/n) 直接回车默认
  Project name (vue-test) 直接回车默认
  Project description (A Vue.js project) 直接回车默认
  Author 写你自己的名字

5. 완료되면 필요한 파일이 이미

폴더에 있습니다. 6. npm 프로젝트 종속성이 많기 때문에 설치 속도가 느려집니다. files

npm install

7. 프로젝트 실행

npm run dev

이 시점에서 기본 설치 및 설정이 완료되었습니다

아래에 좀 적어보겠습니다. 프로젝트에서 만난 필수 파일 소개

1, jQuery
< 가져오기 🎜> 이전에 다른 사람들과 논의할 때 vue는 jQuery를 사용할 필요가 없다고 했는데, 우리 프로젝트에서는 꼭 설치해야 한다고 해서 설치했어요 -_-

먼저 명령어는 라인 설치

npm install jquery --save

추가 - -save는 로컬에 유지하는 것을 의미합니다

. 그런 다음 webpack.config.js에

new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery'
 })

<🎜를 추가합니다
module.exports.plugins = >

인용하고 싶은 js에

import $ from 'jquery'
window.$=$

를 추가하세요.

2.

정적css 및 js 가져오기
정적 CSS 가져오기

@import './assets/css/global.css';

정적 js는 해당 js

require
와 같은 해당 .vue 파일에서

를 가져오는 것입니다. 그리고 이러한 js와 css 자산

require('./assets/js/global.js')

3.vue-

resource import 아래에 배치해야 합니다. import 방법은 동일합니다.

npm install vue-resource --save

그 후 import가 필요한 js에서 import해서 사용하세요

import VueResource from 'vue-resource'
Vue.use(VueResource)

위 내용은 그래픽과 텍스트로 설치부터 구축 과정까지 vue.js를 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!